Javascript 使用ajax和动态更新在highchart上放置两行
我正在尝试使用带有动态(定期)更新的ajax在Highchart上添加第二行。使用ajax,第一行可以很好地工作。我认为问题在于传入数据的格式,以及如何为每一行分割数据 我可以控制ajax数据的格式,所以它可以以任何形式发布,但它适用于第一行 以下是随每个请求一起接收的ajax数据:Javascript 使用ajax和动态更新在highchart上放置两行,javascript,ajax,highcharts,dynamic-data,Javascript,Ajax,Highcharts,Dynamic Data,我正在尝试使用带有动态(定期)更新的ajax在Highchart上添加第二行。使用ajax,第一行可以很好地工作。我认为问题在于传入数据的格式,以及如何为每一行分割数据 我可以控制ajax数据的格式,所以它可以以任何形式发布,但它适用于第一行 以下是随每个请求一起接收的ajax数据: [Date.parse("2013/02/14 14:29:00 -0000"), 51, 216510] 这将在51处为第一条线创建一个点,但在216510处为第二条线创建任何点 以下是我正在使用的javas
[Date.parse("2013/02/14 14:29:00 -0000"), 51, 216510]
这将在51处为第一条线创建一个点,但在216510处为第二条线创建任何点
以下是我正在使用的javascript:
var chart; // global
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
$.ajax({
url: '/htbin/count_since_total',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 30; // shift if the series is longer than 300 (drop oldest point)
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: requestData
}
},
title: {
text: 'time'
},
xAxis: {
type: 'datetime'
},
yAxis: [{ // Primary yAxis
title: {text: 'count'},
opposite: false
}, { // Secondary yAxis
title: {text: 'Total'},
opposite: true
}],
series: [{
yAxis: 0,
name: 'number',
data: []
},{
yAxis: 1,
name: 'Total',
data: []
}],
});
});
编辑1: 不起作用,没有建议更改的第二行。我认为传入的数据格式不正确,或者接收后需要处理。另外,如何将数据分配到正确的行
series: [{
yAxis: 0,
name: 'number',
data: []
},{
yAxis: 1,
name: 'Total',
data: []
}],
---------结束编辑1-----------------在您的
成功
-操作/功能中,您仅在更新系列[0]
如果要向第二行添加点,还必须向
系列[1]
添加点。为循环添加,以对每个系列执行相同操作
success: function(point) {
for(var i = 0, length = chart.series.length; i < length; i++) {
var serie = chart.series[i],
// shift if the series is longer than 300 (drop oldest point)
var shift = serie.data.length > 30;
// add the point
serie.addPoint(eval(point), true, shift);
}
// call it again after one second
setTimeout(requestData, 1000);
}
成功:功能(点){
对于(var i=0,length=chart.series.length;i30;
//补充一点
系列添加点(评估(点)、真实、移位);
}
//一秒钟后再打
setTimeout(requestData,1000);
}