我正在尝试使用来自 MongoDB 的 JSON 响应绘制折线图。我认为我的代码不正确,我不断收到 this error
我试过这个。
myurl = "/api/humidity"
$(function() {
$.ajax({
type: "GET",
url: myurl,
cache: false,
dataType : "json",
success: function (data1) {
// console.log(data);
$.each(data1.when, function(position, when) {
if (data1.when) {
chartData.labels.push(data1.when);
} else {
chartData.labels.push('');
}
chartData.datasets[0].data.push(data.message);
});
}
})
})
var chartData = {
labels: [],
datasets: [
{
label: "Humidity",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Line (chartData, {
});
最终我希望我的代码能够迭代数据库中的项目直到完成。
这就是我的 JSON 数据的样子
[{
"_id": "585b544f5c86b6c8537c34d6",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:27.000Z"
}, {
"_id": "585b54505c86b6c8537c34d7",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:28.000Z"
}, {
"_id": "585b54515c86b6c8537c34d8",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:29.000Z"
}, {
"_id": "585b54525c86b6c8537c34d9",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:30.000Z"
}, {
"_id": "585b54535c86b6c8537c34da",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:31.000Z"}]
如果有任何帮助或建议,我将不胜感激。
最佳答案
您可以尝试使用 Chart.js 版本 2.2
var cdata = [{
"_id": "585b544f5c86b6c8537c34d6",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:27.000Z"
}, {
"_id": "585b54505c86b6c8537c34d7",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:28.000Z"
}, {
"_id": "585b54515c86b6c8537c34d8",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:29.000Z"
}, {
"_id": "585b54525c86b6c8537c34d9",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:30.000Z"
}, {
"_id": "585b54535c86b6c8537c34da",
"topic": "Humidity",
"message": 23,
"when": "2016-12-22T04:19:31.000Z"
}]
var labeldata = [];
var chrtdata = [];
for(var i =0; i < cdata.length; i++)
{
labeldata.push(cdata[i].when);
chrtdata.push(cdata[i].message)
}
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labeldata,
datasets: [{
label: 'Humidity',
data: chrtdata,
backgroundColor: "rgba(153,255,51,0.6)"
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
关于javascript - 使用json数据在chart.js中绘制折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41348495/