从 php 循环中绘制多个图表(Chart.js)以读取多个文件

EDIT 1: The way it is here, data from the x axis will be treated as continuous (linear). But be sure to have added the script line from Chart.js correspondent to at least the 3.0.0-beta.7. On earlier versions, this won't work...

@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('
');

                    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 cont = cont + {!!for JavaScript 循环结束时的 $spectraCount !!} 是为了匹配计数的文件数，并完成 for 循环，循环会重新开始每次通过刀片代码中的 foreach 循环.没有添加，它会导致页面中的图表数量增加一倍.

<?php

    namespace AppHttpLivewire;

    use LivewireComponent;
    use AppModelsSpectra;
    use IlluminateSupportFacadesDB;
    use IlluminateSupportFacadesHttp;

    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,
            ]);

        }
    }

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');

}