使用 AJAX 加载事件扩展高图表

Question

我有一个php，jquery，jqueryMobile，highcharts页面，一页上有几个图表。

不，我添加了一个 ajax 调用来加载事件以将实时数据放入图表中。 但是我必须在每个Highcharts对象中声明这一点，无论我尝试哪种方式，它都不能作为全局函数工作。

这里有我拥有的部分代码并且正在工作

$(document).ready(function () {
// define sensorName
var sensorName = "rflinkstation";
chart1 = new Highcharts.chart({
"chart": {
"renderTo": sensorName,
"events": {
"load": function() {
var series = this.series[0];
setInterval(function() {
$.ajax({
url: 'sensorAjaxData.php',
success: function(point) {    
console.log("ajax request for = " + sensorName);                            
// add the point
series.addPoint(point, true, true);
},
cache: false,
data: { "sensorName": sensorName,
"stationID": <?php echo $stationID;?>,
}
});
}, 60000);
}   
}
},          
"series": [{

。

$(document).ready(function () {
// define sensorName
var sensorName = "batteryvolt1";
chart2 = new Highcharts.chart({             
"chart": {
"renderTo": sensorName,
"events": {
"load": function() {
var series = this.series[0];
setInterval(function() {
$.ajax({
url: 'sensorAjaxData.php',
success: function(point) {    
console.log("ajax request for = " + sensorName);                            
// add the point
series.addPoint(point, true, true);
},
cache: false,
data: { "sensorName": sensorName,
"stationID": <?php echo $stationID;?>,
}
});
}, 60000);
}   
}
},
"series": [{

....

我试图实现的是将"load"函数放入一个函数中，以防止复制粘贴代码。

但是如果我声明类似的东西

function getData(sensorName) {

和

events: { load: setInterval(getData(sensorName),6000) }

我松开了对象并得到这个.series是未定义的 我的编程技巧来自预对象或编程，我不完全理解如何扩展高图表的解释。此外，还编写了Highcharts实时数据示例，以便图表是全局变量，并且仅适用于页面上的一个图表。

所以我的问题是我如何使用加载事件扩展 Highcharts，该事件将"sensorName"作为参数，并执行 ajax 调用并将返回的数据插入到正确的图表中？

还有一个附带的问题，为什么是这样的：

var series = this.series[0];
$.ajax({
...
series.addPoint(point)
...

工作，这不是

$.ajax({
...
this.series[0].addPoint(point)
...

Answer 1

setInterval()函数内部的this(窗口对象(与chart.events.load()函数中的this(图表对象(不同。例如，您可以在getData()函数中设置第二个参数，该参数将指示图表。现在getData()看起来像这样：

function getData(sensorName, chart) {
var series = chart.series[0];
$.ajax({
url: 'http://www.json-generator.com/api/json/get/bTNHrHVJmG?indent=2',
success: function(point) {
console.log('AJAX request for = ' + sensorName);
// add the point
series.addPoint(point, true, true);
},
data: {
sensorName: sensorName,
stationID: sensorName + 'ID' //<?php echo $stationID;?>,
},
cache: false
});
};

它在加载事件中的调用如下所示：

load: function() {
var chart = this;
setInterval(function() {
getData(chart.options.chart.renderTo, chart);
}, 5000);
}

看看我为你准备的例子。

示例：
http://jsfiddle.net/a40qvy47/