使用PHP和AJAX将数据动态传递到Flot Chart

时间:2016-11-21 10:38:17

标签: javascript php ajax dynamic flot

我一直在使用Flot图表尝试在我的网页上显示一些数据。与静态数据完美配合,但我想从我的数据库中动态提取这些数据。但我正在努力解决这方面的一些问题,

这是我的PHP:

<?php while($test = sqlsrv_fetch_array($testData, SQLSRV_FETCH_ASSOC)) : ?>
    <tr>
       <td>
         <p><i class="fa fa-square blue"></i><?php echo $test['SalesGroup'];?> </p>
       </td>
       <td>
         <?php echo $test['PercentageSales'];?>
       </td>
    </tr>
<?php endwhile; ?>

这对传奇很好,我在这里的查询是可以在这种情况下更改颜色类&#39;蓝色&#39;对于每一行数据?

然后在我的JavaScript中,这是我真正挣扎的地方,我怎样才能使这些数据动态化?我想设置类别名称以匹配上面的PHP图例。数据集需要是“百分比销售额”。来自传说。如果可能的话颜色也是因为它们不总是6个结果。

<script>
  $(document).ready(function(){
    var options = {
      legend: false,
      responsive: false
    };

    new Chart(document.getElementById("canvas1"), {
      type: 'doughnut',
      tooltipFillColor: "rgba(51, 51, 51, 0.55)",
      data: {
        labels: [
          "Category 1",
          "Category 2",
          "Category 3",
          "Category 4",
          "Category 5",
          "Category 6",
        ],
        datasets: [{
          data: [16.6,16.6,16.6,16.6,16.6,16.6],
          backgroundColor: [
            "#BDC3C7",
            "#9B59B6",
            "#E74C3C",
            "#26B99A",
            "#3498DB",
            "#34495E"
          ],
          hoverBackgroundColor: [
            "#CFD4D8",
            "#B370CF",
            "#E95E4F",
            "#36CAAB",
            "#49A9EA",
            "#34495E"
          ]
        }]
      },
      options: options
    });
  });
</script>

我很欣赏这个大问题,但任何方向的帮助都会很大。

0 个答案:

没有答案