javascript - 如何使用php在脚本中动态传递值以生成图形

Question

我正在尝试使用 php 为 mysql 中的数据创建条形图。我使用 Bootstrap 模板来创建应用程序。我已经预定义了带有静态数据的条形图。我想从数据库中添加数据。我尽了最大努力但找不到解决方案，因为我是 Javascript 的初学者。请指导我动态添加数据。脚本如下:

 // Bar chart
      var ctx = document.getElementById("mybarChart");
      var mybarChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [{
            label: '# of Votes',
            backgroundColor: "#26B99A",
            data: [10, 20, 30, 40, 20, 10, 40]
          }, {
            label: '# of Votes',
            backgroundColor: "#03586A",
            data: [41, 56, 25, 48, 72, 34, 12]
          }]
        },

        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });

 <div class="x_content">
                    <canvas id="mybarChart"></canvas>
                  </div>

Answer 1

如果我了解环境，您有 php 生成的网页。 如果是这样，我会:

1. 创建一个 .php 文件
2. 编写一些 php 代码以连接到数据库并检索包含要绘制图表的数据的数组
3. 复制你的 JS 代码，包裹在 <script> </script> 中标记并将其包装在一个 JS 函数中，稍后您将在页面中调用该函数

4. 在您的 JS 代码中，在数据集之后，编写一个 php 循环，如下所示:

   // Bar chart
   var ctx = document.getElementById("mybarChart");
   var mybarChart = new Chart(ctx, {
   type: 'bar',
   data: {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [{
       <?php
       if (count($arrayOfData) > 0){
          echo "label: '# of Votes',";
          echo "backgroundColor: '#26B99A',";
          echo "data: [";
          $firstValue = true;
          foreach ($arrayOfData as $dataValue) {
              if ( ! $firstValue ) {
                 echo ", ".$dataValue;
              } else {
                 $firstValue = false;
              }
              echo $dataValue;
          }
          echo "]";
       } else {
          //Decide what to do if you don't have data
       }
       ?>
     }]
   }'
   

5. 编写 HTML/PHP 页面的其余部分。

请注意，如果您想要在图表中使用 1 个以上的条形图，您还必须循环遍历不同的数据集，而不仅仅是我在上面为简单起见显示的那样循环遍历一个。