chart绑定mysql数据源_javascript-将Chart.js连接到MySQL数据库

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

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

= $value['data'] ?>= $value['label'] ?>

因此,可以像这样将数据插入html,但是如何将其插入chart.js JavaScript？所以代替

labels: ["January", "February"]

我会有类似的东西

labels: $array

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

解决方法:

如果您的数据位于一个php数组中,而标签位于另一个php数组中,则可以使用json_encode函数将数据传递给chartjs.

使用$this-> list_excercise,您可以执行以下操作：

$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