用ajax加載事件來擴展highcharts

我有一個php，jquery，jqueryMobile，在一個頁面上有幾個圖表的highcharts頁面。用ajax加載事件來擴展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未定義我的節目頗有基礎來源於預對象orinted編程和我不充分理解如何擴展高空作業的解釋。此外，Highcharts實時數據示例的寫法是，chart是一個全局變量，僅適用於頁面上的一個圖表。

所以我的問題是我如何擴展Highcharts與負載事件，需要「sensorName」作爲參數，並執行ajax調用和插入返回的數據到正確的圖表？

和側問題，爲什麼是這樣的：

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

工作，這不是

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

來源

2017-08-25 roadfox

的this（Window對象）setInterval()函數內是不一樣的this（Chart對象）如chart.events.load()函數。你可以例如設置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事件看起來是這樣的：

load: function() { 
    var chart = this; 

    setInterval(function() { 
    getData(chart.options.chart.renderTo, chart); 
    }, 5000); 
}

看看我爲你準備的例子。

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

來源

2017-08-25 13:26:18

用ajax加載事件來擴展highcharts

回答

相關問題