使用 ajax 加载事件扩展 highcharts答案

【问题标题】：extending highcharts with an ajax load event使用 ajax 加载事件扩展 highcharts
【发布时间】：2017-08-25 09:27:06
【问题描述】：

我有一个 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": [{

....

我试图实现的是将“加载”函数放入一个函数中，以防止复制粘贴分配代码。

但如果我声明类似

function getData(sensorName) {

和

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

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

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

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

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

工作，这不是

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

【问题讨论】：

标签： javascript ajax highcharts

【解决方案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/

【讨论】：