javascript 将 JSON 数据输出到 Chart.js 标签和数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25130239/
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
Outputting JSON data to Chart.js labels and data
提问by iLuPa
I'm tring to output JSON data to a Chart using Chart.js, querying a MySQL database for the data.
我正在尝试使用 将 JSON 数据输出到图表Chart.js，查询 MySQL 数据库中的数据。
Basically what I did to query was (data.php):
基本上我所做的查询是（data.php）：
<?php
header('Content-Type: application/json');
$con = //Database connection
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to DataBase: " . mysqli_connect_error();
}
else
{
$data_points = array();
$result = mysqli_query($con, "SELECT * FROM condicao order by id desc limit 10");
while($row = mysqli_fetch_array($result))
{
$point = array($row['timestamp'], $row['temperatura']);
array_push($data_points, $point);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
?>
Which gave me the following array (timestamp,temperature):
这给了我以下数组（timestamp，temperature）：
[
["2014-08-04 23:06:01",16.9],
["2014-08-04 23:03:02",17.1],
["2014-08-04 23:00:02",17.1],
["2014-08-04 22:57:01",17.1],
["2014-08-04 22:54:01",17.1],
["2014-08-04 22:51:02",17.1],
["2014-08-04 22:48:01",17.2],
["2014-08-04 22:45:02",17.2],
["2014-08-04 22:42:01",17.2],
["2014-08-04 22:39:02",17.2]
]
Now I'm trying to output this to a Chart, but I don't know how to take the first object as the label (timestamp) and the second object as the datapoints (temperature).
现在我正在尝试将其输出到图表，但我不知道如何将第一个对象作为标签（时间戳）和第二个对象作为数据点（温度）。
Here's the code in which I'm trying to output the Chart:
这是我尝试输出图表的代码：
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("data.php", function (result) {
var tempData = {
labels : result,
datasets : [{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : result
}]
}
var temp = document.getElementById('compradores').getContext('2d');
new Chart(temp).Line(tempData);
});
});
</script>
How can I identify result as the first object for the label (timestamp), and the second object on the array as the datapoints (temperature)?
如何将结果标识为标签（时间戳）的第一个对象，并将数组上的第二个对象标识为数据点（温度）？
In the way I'm doing above, I'm getting both timestamp and temperature as the labels.
以我在上面所做的方式，我将时间戳和温度作为标签。
I've already tried result[0], tried defining a label for the timestamp and calling result['timestamp']and so on, with no luck.
我已经尝试过result[0]，尝试为时间戳和调用result['timestamp']等定义标签，但没有运气。
Thanks!
谢谢！
回答by harshes53
The issue is you have to provide timeStamp/temperature in separate collection as in labels and dataset associated with it.
问题是您必须在单独的集合中提供时间戳/温度，如与之关联的标签和数据集。
Either you can respond back "result" separately into two two arrays like:
您可以将“结果”分别回复到两个数组中，例如：
[["16.9", "17.1", "17.1", "17.1", "17.1", "17.1", "17.2", "17.2", "17.2", "17.2"],
["2014-08-04 23:06:01", "2014-08-04 23:03:02", "2014-08-04 23:00:02", "2014-08-04 22:57:01", "2014-08-04 22:54:01", "2014-08-04 22:51:02", "2014-08-04 22:48:01", "2014-08-04 22:45:02", "2014-08-04 22:42:01", "2014-08-04 22:39:02"]];
And then you can simply do,
然后你可以简单地做，
var tempData = {
labels : result[0],
datasets : [{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : result[1]
}]
};
OR you can convert it into two arrays on front-end side.
或者您可以在前端将其转换为两个数组。
For example:
例如：
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("data.php", function (result) {
var labels = [],data=[];
for(var item in result){
labels.push(result[item].slice(0,1).toString());
data.push(result[item].slice(1,2).toString());
}
var tempData = {
labels : labels,
datasets : [{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : data
}]
};
var temp = document.getElementById('compradores').getContext('2d');
var lineChart = new Chart(temp).Line(tempData);
});
});
</script>
