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

我的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
     });
}

我在模型中调用选择查询,然后将结果发送到我的视图.
然后在我的视图中,我可以像这样获取数据.
我以一张桌子为例.

 <?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

我无法弄清楚将数据获取到脚本的简单方法.谁能帮我这个忙吗？先感谢您.

解决方法:

如果您的数据位于一个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;
?>

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

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,javascript,mysql,php
来源： https://codeday.me/bug/20191120/2045946.html