我发现 Highcharts 是演示示例之外的一个思维领域。当查看 stackoverflow 时,有大量针对许多不同情况以多种不同方式完成的示例。
我尝试使用一些代码来使其正常工作,但没有成功。
我正在尝试加载图表以每隔几秒重新加载和更新图表。我让 ajax 调用开始工作,输入数据并每隔几秒调用一次。但我无法找到让 highcharts 获取数据并构建图表的方法。
这是从ajax发回的数据,这是一个Multi Series结果
[{"name":"One","data":[[1433203200000,0],[1433289600000,0],[1433376000000,0],[1433462400000,0],[1433548800000
,0],[1433635200000,31.48],[1433721600000,0]]},{"name":"Two","data":[[1433203200000,0],[1433289600000
,0],[1433376000000,0],[1433462400000,0],[1433548800000,0],[1433635200000,0],[1433721600000,0]]}]
这是highchart代码,我做错了什么?
chart = new Highcharts.Chart({
chart: {
renderTo: 'final',
defaultSeriesType: 'spline',
events: {
load: function()
{
setTimeout(function(){
$.ajax({
url: 'test',
type: 'GET',
async: true,
dataType: "json",
success: function (data) {
console.log(data);
chart.setData(data,true);
//chart.setData(data,true);
}
});
}, 10000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: []
});
最佳答案
有两件事:
1) setTimeout
仅被调用一次。您可能想使用setInterval
。
2) 没有像 chart.setData()
这样的方法。有series.setData()
。打开demo看看它是如何使用的。在你的情况下回调应该是这样的:
load: function() {
var myChart = this;
setInterval(function() {
$.ajax({
url: 'test',
type: 'GET',
async: true,
dataType: "json",
success: function (data) {
$.each(data, function(i, d) {
if(myChart.series[i]) {
myChart.series[i].setData(d.data,false, false);
} else { // series doesn't exist
myChart.addSeries(d, false);
}
});
myChart.redraw(true);
}
});
}, 1000);
}
关于javascript - Highcharts ajax 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30719817/