正在将 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
     });
}

我在模型中调用 select 查询，然后将结果发送到我的视图。然后在我的视图中，我可以像这样获取我的数据。我以 table 为例。

 <?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/template 中：

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) ?>
     }
   ]
}

我没有运行代码，但有一个片段。
看看有没有帮助。

正在将 Chart.js 连接到 MySQL 数据库

Connecting Chart.js to MySQL database

javascript

php

mysql

chart.js