【发布时间】:2016-09-14 01:47:56
【问题描述】:
我正在尝试使用以下代码每 3 秒向 highcharts 折线图添加一个新点。但它并没有增加新的点。 我验证了从 json 返回的点是正确的,例如 [x,y]。 如果没有 getjson 部分并使用 [3,4] 之类的点,它就可以工作。但是当我添加 json 时,它不会添加应该传递给 json 的新数据。
var chart; // global
function requestData() {
var series = this.series[0];
$.getJSON('url',
function(point){
// add the point
series.addPoint(point);
// call it again after one second
setInterval(requestData, 3000);
});
}
我加载 requestData 的方式如下,它与一个静态点添加一起工作。
chart: {
zoomType: 'x',
events: {
load: requestData
}
知道为什么函数不重复或不获取数据或不将数据放入点或添加点不起作用吗?
我使用点击而不是加载,它工作正常。似乎周期性加载不起作用。
编辑:完整图表代码:
.getJSON('url2',
function(data){
$('#container11').highcharts({
chart: {
zoomType: 'x',
events: {
load: requestData
}
},
title: {
text: ''
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'time',
dateTimeLabelFormats: {
hour: '%H:%M',
}
},
yAxis: {
title: {
text: 'test'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'name',
data: data
}]
});
});
【问题讨论】:
-
函数
requestData负责向图表添加点,但您正在为ajaxRequest设置间隔。setInterval(ajaxRequest, 3000);应该是setTimeout(requestData, 3000);。如果没有,那么发布完整的代码会有所帮助。requestData如何在其中获取this上下文?这个函数是对象的一部分吗? -
谢谢你,在我的代码中是
requestData,我只是复制错误。我编辑了代码。实际上,我尝试使用series = chart.series[0]而不是var series = this.series[0];,它甚至没有通过静态添加点。我假设因为这个函数是从图表中加载的,这就是this起作用的原因。完整代码是指图表代码的其余部分吗?我在主要问题中添加了其余代码 -
你看过 Highcharts 文档吗?在文档中,您可以找到如何动态添加点的信息:highcharts.com/docs/working-with-data/live-data
-
是的,我实际上使用该文档来开发它。问题是“负载”似乎不起作用。因为当我使用点击它的作品。当我单击单击时,它会加载 requestData 并按预期每 3 秒循环并获取数据。但是 load 似乎根本没有调用 requestData。
-
我通过 'var series = this.series[0];' 让它工作了在“getjson”之后,感谢 cmets
标签: javascript json highcharts web2py