javascript 将 Chart.js 连接到 MySQL 数据库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28652495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Connecting Chart.js to MySQL database
提问by Arcane
I have this script in my html document which creates a chart using Chart.js. The data in it are manualy inserted ( The labels and the data in datasets). The data in datasets are now randomly generated numbers. But I need to somehow connect it with my MySQL database.
我的 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
});
}
I call select query in Model and then send the result to my View. And then in my View I can get to my data like this. I used a table as an example.
我在模型中调用选择查询，然后将结果发送到我的视图。然后在我的视图中，我可以像这样获取我的数据。我以一张桌子为例。
<?php foreach ($this->list_excercise as $value) : ?>
<td><?= $value['data'] ?></td>
<td><?= $value['label'] ?></td>
<?php endforeach; ?>
So the data can be inserted into html like this, but how can I insert it into chart.js javascript? So instead of
所以数据可以像这样插入到 html 中，但是如何将它插入到chart.js javascript中呢？所以代替
labels: ["January", "February"]
I would have something like
我会有类似的东西
labels: $array
I cannot figure out a simple way of getting the data to the script. Can anyone help me out with this? Thank you in advance.
我想不出一种将数据传送到脚本的简单方法。谁能帮我解决这个问题？先感谢您。
采纳答案by rtome
If you have your data in a php array and your labels in another php array then you can just use the json_encodefunction to pass your data to chartjs.
如果您的数据在一个 php 数组中，而您的标签在另一个 php 数组中，那么您可以使用json_encode函数将您的数据传递给 chartjs。
With your $this->list_excercise you could do this :
用你的 $this->list_excercise 你可以这样做：
<?php
$data = array();
$label = array();
foreach ($this->list_excercise as $value) :
$data[] = $value['data'];
$label[] = $value['label'];
endforeach;
?>
and then in your 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) ?>
}
]
}
I haven't run the code, but the idea is there as a snippet.
See if that helps.
我还没有运行代码，但这个想法是作为一个片段存在的。
看看是否有帮助。
