javascript - Chart.js 与 getjson
问题描述
我想用我用 getjson 查询的 json 数据用 chart.js 绘图。
下面的代码给了我和空的情节。但是,如果我用 alert(ddata.length); 取消注释该行 它不仅以 0 弹出,而且这次情节正确出现 - 令人困惑的行为。使用chart.js 2.6.0 jquery 3.3.1。
var ddata = [];
//var labels = [];
$.getJSON("http://192.168.1.143/json_request", function(jdata){
$.each(jdata, function(i, d){
ddata.push({"x":d.timestamp, "y": d.x0});
//labels.push(String(d.timestamp));
});
});
//alert(ddata.length); // <-- Works if uncommented !!!
//console.table(ddata);
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
//labels: labels,
datasets: [{
label: 'h1px2',
data: ddata,
backgroundColor: 'rgba(0, 0, 255, 0.2)',
borderColor: 'rgba(0,0,255,1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'linear'
}]
}
}
});
一个json样本:
[{"timestamp": 1528828783,"x0": 246.21,"x1": 1.16,"x2": 11.47,"x3": 8.62,"x4": -127.00},
{"timestamp": 1528828793,"x0": 245.75,"x1": 1.37,"x2": 15.41,"x3": 4.93,"x4": -127.00}, etc...
您能告诉我如何正确绘制此图吗?
解决方案
推荐阅读
- python - 生成器表达式中的方法:gi_running、gi_yieldfrom 等
- wordpress - Wordpress:在 slug 中允许下划线
- javascript - 用 JavaScript 动态生成逗号
- postgresql - 如何保存结构数组
- database - 将多个图像上传到firebase存储并将下载url保存到android studio kotlin中的实时数据库
- azure - Azure 构建管道
- python - AWS EC2 mongoDB - 脚本效率
- ruby - 如何将 Ruby Proc 的内容读入字符串
- c# - 为什么这个 LINQ 查询不能正常工作?
- cmake - CMake 关于包含/依赖项的 GLSLC 调用