javascript - 将 Chart.js 连接到 MySQL 数据库

Question

我的 html 文档中有这个脚本，它使用 Chart.js 创建图表。其中的数据是手动插入的(数据集中的标签和数据)。数据集中的数据现在是随机生成的数字。但我需要以某种方式将它与我的 MySQL 数据库连接起来。

<script>
   var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
   var barChartData = {
       labels : ["January","February","March","April","May","June","July","January","February","March","April","May","June","July"],
       datasets : [
          {
           fillColor : "rgba(23, 158, 3, 0.8)",
           strokeColor : "rgba(24, 107, 2, 0.8)",
           highlightFill: "rgba(24, 107, 2, 0.9)",
           highlightStroke: "rgba(24, 107, 2, 1)",
           data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
           }
           ]
   }
window.onload = function(){
     var ctx2 = document.getElementById("canvas2").getContext("2d");
     ctx2.canvas.width = 1000;
     ctx2.canvas.height = 800;
     window.myBar = new Chart(ctx2).Bar(barChartData, {
            responsive : true
     });
}

我在模型中调用选择查询，然后将结果发送到我的 View 。然后在我的 View 中，我可以像这样获取我的数据。我以表格为例。

 <?php foreach ($this->list_excercise as $value) : ?>
                  <td><?= $value['data'] ?></td>
                  <td><?= $value['label'] ?></td>
 <?php endforeach; ?>

所以数据可以像这样插入到html中，但是我如何将它插入到chart.js javascript中呢？所以不是

labels: ["January", "February"]

我想要的东西

labels: $array

我想不出一种将数据获取到脚本的简单方法。谁能帮我解决这个问题？提前谢谢你。

Answer 1

如果您的数据在一个 php 数组中，而您的标签在另一个 php 数组中，那么您可以只使用 json_encode函数将您的数据传递给 chartjs。

用你的 $this->list_excercise 你可以这样做:

<?php
    $data = array();
    $label = array();
    foreach ($this->list_excercise as $value) :
        $data[] = $value['data'];
        $label[] = $value['label'];
    endforeach;
?>

然后在您的 View /模板中:

var barChartData = {
   labels : <?php echo json_encode($label) ?>,
   datasets : [
      {
       fillColor : "rgba(23, 158, 3, 0.8)",
       strokeColor : "rgba(24, 107, 2, 0.8)",
       highlightFill: "rgba(24, 107, 2, 0.9)",
       highlightStroke: "rgba(24, 107, 2, 1)",
       data : <?php echo json_encode($data) ?>
     }
   ]
}

我还没有运行代码，但这个想法是作为一个片段存在的。
看看是否有帮助。