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

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

我的刀片文件代码是:

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

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

qlzsbp2j

qlzsbp2j1#

最后我用动态画布id和更新函数完成了这一点。

  1. <div style="text-align: center" class="row">
  2. <div class="col-md-4 text-center" >
  3. <canvas id="{{ $loop->index }}"></canvas>
  4. </div>
  5. </div>
  6. <script>
  7. let {{ 'c'.$u }} = new Chart(document.getElementById({{ $loop->index }}), {
  8. type: 'pie',
  9. data: {
  10. labels: [],
  11. datasets: [{
  12. label: '# of Votes',
  13. data: [],
  14. backgroundColor: [
  15. 'rgba(255, 99, 132, 0.2)',
  16. 'rgba(54, 162, 235, 0.2)',
  17. 'rgba(255, 206, 86, 0.2)',
  18. 'rgba(75, 192, 192, 0.2)',
  19. 'rgba(153, 102, 255, 0.2)',
  20. 'rgba(255, 159, 64, 0.2)'
  21. ],
  22. borderColor: [
  23. 'rgba(255, 99, 132, 1)',
  24. 'rgba(54, 162, 235, 1)',
  25. 'rgba(255, 206, 86, 1)',
  26. 'rgba(75, 192, 192, 1)',
  27. 'rgba(153, 102, 255, 1)',
  28. 'rgba(255, 159, 64, 1)'
  29. ],
  30. borderWidth: 1
  31. }]
  32. },
  33. options: {
  34. scales: {
  35. y: {
  36. beginAtZero: true
  37. }
  38. }
  39. }
  40. });
  41. </script>
  42. @foreach ($radio_data as $data)
  43. <script> {{ 'c'.$u }}.data.labels.push('{{ $data->answer }}'); {{ 'c'.$u }}.data.datasets.forEach((dataset) => {
  44. dataset.data.push({{ $data->num }});
  45. });
  46. {{ 'c'.$u }}.update(); </script>
展开查看全部

相关问题