从 php 循环绘制多个图表（Chart.js）以读取多个文件

我一直在尝试使用 Chart.js 从 php 循环绘制多个图表。事实证明，Chart.js 只会将数据聚集在一个画布（第一个画布）中，其他画布最终会变成空白。我觉得我已经很接近了，但还没有完全实现......有人可以帮助我吗？提前致谢！这是我的代码：

PS：画布空间出现在其他 div 内部，尽管是空白的......所以它被清除了。

GraphPage.blade.php

@foreach ($items as $item)
<div class="table">
  <div class="table-row">
    {{ $item->id }}
  </div>
  <div class="table-row">
    {{ $item->name }}
  </div>
  <div class="table-row">
    <canvas class="bar-chart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script type="text/javascript">
    
      <?php
      $i = 0;
      $files = fopen("storage/" . $item->file, "r");
      while(!feof($files)) {
      $content = fgets($files);
      $carray = explode(",", $content);
      list($axisX, $axisY) = $carray;
      $x[] = $axisX;
      $y[] = $axisY;
      $i++;
      }
      fclose($files);

      $x_to_json = json_encode((array)$x);
      $y_to_json = json_encode((array)$y);
      ?>

      var x = <?php echo $x_to_json ?>;
      var y = <?php echo $y_to_json ?>;

      var ctx = document.getElementsByClassName('bar-chart');
      var chartGraph = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: x,
          datasets: [{
            label: "Bar Plot",
            data: y,
          }]
        }
      });
    </script>
  </div>
</div>
@endforeach

这就是现在的结果......

第一个图中所有数据都聚集在一起，而第二个图中则没有任何数据......

好吧，事实证明我想出了解决我的问题的方法，当然得到了 stackoverflow 和 YouTube 代码朋友的很多帮助。其作用是，根据公共存储 URL 中的逗号分隔值文件的数量（两列，无标题 ~ 所有内容都可以调整），它读取每个文件并为每个文件动态构建一个 Chart.js 图表其中。无论如何......如果它对任何人有任何帮助，这是我的代码和我使用的帮助来源：

In the 查看刀片文件（created-project.blade.php），我已将 Chart.js 中的画布和函数插入到foreach循环，以便通过数据运行每个文件：

EDIT 1:就这里而言，数据来自x axis将被视为连续（线性）。但请确保至少将 Chart.js 对应的脚本行添加到3.0.0-beta.7。在早期版本中，这不起作用......

@foreach ($mols as $mol)
    <div class="flex flex-wrap m-1 w-5/6 lg:w-3/6">
        <script>

            var cont;
            for(cont = 0; cont < {!! $spectraCount !!}; cont++) {

                window.addEventListener('load', setup);

                async function setup() {

                    const ctx = document.getElementById('myChart').insertAdjacentHTML("afterend","<canvas id='canvas"+cont+"' height='230'></canvas>");
                    const can_id="canvas"+cont;
                    const ctx2 = document.getElementById(can_id).getContext('2d');
                    const spectra = await getData();

                    window.can_id = new Chart(ctx2, {

                        type: 'bar',
                        data: {
                            datasets: [{
                                label: "{!! $mol->nome_molecula !!}",
                                backgroundColor: "#0070bf",
                                data: spectra.xy,
                                barThickness: 3,
                            }]
                        },
                        options: {
                            scales: {
                                x: {
                                    type: 'linear',
                                    offset: false,
                                    gridLines: {
                                        offsetGridLines: false,
                                    }
                                }
                            }
                        }

                    });

                    window.can_id.update();

                }

                async function getData() {
                    const response = await fetch('spectra/{!! $mol->espectro !!}');
                    const data = await response.text();
                    const xy = [];
                    const table = data.split('\n');

                    table.forEach(row => {
                        const columns = row.split(',');
                        xy.push({'x': parseFloat(columns[0]), 'y': parseFloat(columns[1])});
                    });

                    return { xy };

                }

                var cont = cont + {!! $spectraCount !!};

            }

        </script>

        <canvas id="myChart" class="w-2 h-2"></canvas>

    </div>
@endforeach

PS：原因如下var 续 = 续 + {!! $spectraCount!!}在结束时forJavaScript循环就是匹配统计的文件个数，并完成for循环，每次都会重新启动foreach从刀片代码循环。如果不添加，则会导致页面中的图表数量增加一倍。

数据通过 Livewire 传输成分（CreatedProject.php），包含以下代码：

<?php

    namespace App\Http\Livewire;

    use Livewire\Component;
    use App\Models\Spectra;
    use Illuminate\Support\Facades\DB;
    use Illuminate\Support\Facades\Http;

    class CreatedProject extends Component
    {
        public function render()
        {
            $metadados = DB::table('new_projects')->where('user_id', '=', auth()->user()->id)->orderBy('id_projeto', 'DESC')->first();
            $mols = DB::table('new_molecules')->where('nome_projeto', '=', $metadados->nome_projeto)->get();
            $spectra = DB::table('spectras')->where('nome_projeto', '=', $metadados->nome_projeto)->get();
            $collection = collect($spectra);
            $spectraCount = collect($spectra)->count();

            return view('livewire.created-project', [
                'metadados' => $metadados,
                'mols' => $mols,
                'collection' => $collection,
                'spectraCount' => $spectraCount,
            ]);

        }
    }

进入数据库的文件已经在 livewire 的 save() 函数中进行处理成分（新建Project.php），代码如下：

public function save()
{
    foreach ($this->espectro as $key => $value) {

        $mol_localpath = $this->espectro[$key]->storeAs('spectra', $mol_path);

        $a = 0;
        $files = fopen("spectra/" . $this->espectro[$key]->hashName(), "r");
        while(!feof($files)) {
            $content = fgets($files);
            $carray = explode(",", $content);
            list($mz1, $int1) = $carray;
            $mz[] = $mz1;
            $int[] = $int1;
            $a++;
        }

        fclose($files);

        Spectra::create([
            'user_id' => auth()->user()->id,
            'nome_projeto' => $this->nome_projeto,
            'espectro' => $this->espectro[$key]->hashName(),
            'mz' => $mz,
            'int' => $int,
        ]);

        $mz = [];
        $int = [];

    }

    return redirect()->route('created-project');

}

当然，您不应该忘记在视图文件中 HTML 的 head 标签中添加 Chart.js 主 CDN 脚本，或者按照您认为最好的方式安装它。

两个不同文本文件的结果示例：

PS2：我的 CSS 是基于 Tailwind 的。爱它！

我必须解决这个问题的主要帮助来源：

• YouTube 上 The Coding Train 的这个系列：https://youtu.be/RfMkdvN-23o

• 这篇文章来自 stackoverflow：使用chart.js 实现多个动态折线图 | js和html

• 这个人制作的视频（不是英文，但很容易理解）：https://youtu.be/sjF7A_uMbgc

• 在 Chart.js Github 中发布 @etimberg 的答案：https://github.com/chartjs/Chart.js/issues/8233

• 他用小提琴来解释：https://jsfiddle.net/ob0xc5u7/

一切都切中要害，经过一些调整，我就可以运行了。因此，我在此向开放代码社区表示感谢！