是否可以使用 chartjs 在 Laravel 中生成多个图表？如果可能请给出解决方案

Question

我的blade文件代码是：

@foreach ($radio_data as $data)
                            
                            <div style="text-align: center" class="row">
                                <div class="col-md-4 text-center" >
                                    <canvas id="myChart"></canvas>
                                </div>
                            </div>
                            
                                @php array_push($dataPoints, array("label"=> " $data->answer ", "y"=>  $data->num )); @endphp
    
                                
                                <p>{{ $data->answer }}: {{ $data->num }}</p>
    
                            @endforeach

我正在控制器中获取数据并将其发送到视图。

Answer 1

最后，我使用动态 canvas id 和更新功能完成了此操作。 这是我的代码：

<div style="text-align: center" class="row">
                            <div class="col-md-4 text-center" >
                                <canvas id="{{ $loop->index }}"></canvas>
                            </div>
                        </div>

                        
                        <script>
                          let {{ 'c'.$u }} =  new Chart(document.getElementById({{ $loop->index }}), {
                            type: 'pie',
                            data: {
                                labels:  [],
                                datasets: [{
                                    label: '# of Votes',
                                    data:  [],
                                    backgroundColor: [
                                        'rgba(255, 99, 132, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(255, 206, 86, 0.2)',
                                        'rgba(75, 192, 192, 0.2)',
                                        'rgba(153, 102, 255, 0.2)',
                                        'rgba(255, 159, 64, 0.2)'
                                    ],
                                    borderColor: [
                                        'rgba(255, 99, 132, 1)',
                                        'rgba(54, 162, 235, 1)',
                                        'rgba(255, 206, 86, 1)',
                                        'rgba(75, 192, 192, 1)',
                                        'rgba(153, 102, 255, 1)',
                                        'rgba(255, 159, 64, 1)'
                                    ],
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            }
                            });
                        </script>
                       
                        
                        @foreach ($radio_data as $data)

                        <script>  {{ 'c'.$u }}.data.labels.push('{{ $data->answer }}'); {{ 'c'.$u }}.data.datasets.forEach((dataset) => {
                            dataset.data.push({{ $data->num }});
                        });
                        {{ 'c'.$u }}.update(); </script>