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查询，然后将结果发送到我的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-＆gt; list_excercise，你可以这样做：

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

然后在您的视图/模板中：

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数据库

1 个答案: