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

1tuwyuhd  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(143)

我的刀片文件代码是:

@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

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

qlzsbp2j

qlzsbp2j1#

最后我用动态画布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>

相关问题