我正在使用此处给出的实时图表:http://www.flotcharts.org/flot/examples/realtime/index.html
我尝试用输入JSON文件中的值替换随机数学生成代码。它绘制了一个空白图表。无法弄清楚问题,因为它看起来在逻辑上是正确的。请帮忙。
这里是潦草的:
<script type="text/javascript">
$(function() {
var check;
// We use an inline data source in the example, usually data would
// be fetched from a server
var dat = [];
//totalPoints = 300;
function getRandomData() {
//alert("fff");
if (dat.length > 0)
dat = dat.slice(1);
// Do a random walk
//while (dat.length < totalPoints) {
//var prev = dat.length > 0 ? dat[dat.length - 1] : 50,
// y = prev + Math.random() * 10 - 5;
//if (y < 0) {
// y = 0;
//} else if (y > 100) {
// y = 100;
//}
//dat.push(y);
$.getJSON('data_3.json', function(data) {
alert(data+"i m here");
for (var i in data.nums) {
output = data.nums[i];
dat.push(output);
}
});
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < dat.length; ++i) {
res.push([i, dat[i]]);
}
return res;
}
// Set up the control widget
var updateInterval = 30;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 2000) {
updateInterval = 2000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#placeholder", [ getRandomData() ], {
series: {
shadowSize: 0 // Drawing is faster without shadows
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
show: false
}
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
这是JSON数据,data_3.json:
{
"label": "FLOT",
"nums":[
0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269,
0.8269, 0.8258, 0.8247, 0.8286, 0.8289, 0.8316, 0.832, 0.8333, 0.8352, 0.8357,
0.8355, 0.8354, 0.8403, 0.8403, 0.8406, 0.8403, 0.8396, 0.8418, 0.8409, 0.8384,
0.8386, 0.8372, 0.839, 0.84, 0.8389, 0.84, 0.8423, 0.8423, 0.8435, 0.8422,
0.838, 0.8373, 0.8316, 0.8303, 0.8303, 0.8302, 0.8369, 0.84, 0.8385, 0.84,
0.8401, 0.8402, 0.8381, 0.8351, 0.8314, 0.8273, 0.8213, 0.8207, 0.8207, 0.8215,
0.8242, 0.8273, 0.8301, 0.8346, 0.8312, 0.8312, 0.8312, 0.8306, 0.8327, 0.8282,
0.824, 0.8255, 0.8256, 0.8273, 0.8209, 0.8151, 0.8149, 0.8213, 0.8273, 0.8273,
0.8261, 0.8252, 0.824, 0.8262, 0.8258, 0.8261, 0.826, 0.8199, 0.8153, 0.8097,
0.8101, 0.8119, 0.8107, 0.8105, 0.8084, 0.8069, 0.8047, 0.8023, 0.7965, 0.7919,
0.7921, 0.7922, 0.7934, 0.7918, 0.7915, 0.787, 0.7861, 0.7861, 0.7853, 0.7867,
0.7827, 0.7834, 0.7766, 0.7751, 0.7739, 0.7767, 0.7802, 0.7788, 0.7828, 0.7816,
0.7829, 0.783, 0.7829, 0.7781, 0.7811, 0.7831, 0.7826, 0.7855, 0.7855, 0.7845
] }
答案 0 :(得分:1)
我认为问题是您异步获取数据,但继续使用您的代码,就好像数据已经存在一样。
当你进入getRandomData
时,你会删除(几乎)所有点数。然后,您将使用$.getJSON
异步获取新数据。您尝试填写res
,但$.getJSON
的结果可能还没有。
填写res
进行检查时插入断点/调试器。
请尝试删除此代码
以清空dat
变量
if (dat.length > 0)
dat = dat.slice(1);