如何更新HighCharts中唯一數據的圖表

下面的示例代碼HERE我有一個函數可以獲取json數據並將其作爲圖表事件加載，以便使用HighCharts動態顯示數據。如何更新HighCharts中唯一數據的圖表

function requestData() { 
    $.ajax({ 
     url: 'fetch_json_data.php', 
     success: function(point) { 
      var series = chart.series[0], 
       shift = series.data.length > 20; 
       chart.series[0].addPoint(point, true, shift);          
       // call it again after one second    
       setTimeout(requestData, 1000);     
     }, 
     cache: false 
    }); 
}

問題是，每次AJAX函數的返回值相同每秒一次，圖形相貌平平，我不希望這種情況發生，因爲它創造了一個階梯式行而不是某個時候改變了正常的圖形每次數據。

我在考慮把setTimeout(requestData, 1000);只支持point包含不同的值。

不幸的是，我不能讓它的工作，所以也許有一種方法來控制它，使圖表只有在point發生變化時纔會更新。

任何想法？

來源

2017-04-12 anagnam

TL; DR 給它短期記憶！將該點作爲參數傳遞給遞歸函數，並在再次調用它之前檢查新點。

是的，只有當您從服務中收到新的point時，纔可以致電requestData函數。基本上你所擁有的是遞歸函數，你可以通過傳遞point作爲參數來有條件地調用它。

所以在概念上（而不能運行代碼由於缺少數據），以及例如是這樣的：

function requestData(oldPoint) { // <--- Passing it a oldPoint to remember 
    $.ajax({ 
     url: 'fetch_json_data.php', 
     success: function(point) { 
      var series = chart.series[0], 
       shift = series.data.length > 20; 

       if(point[1] !== oldPoint[1]){  //<---- Check if this is a new point 
        chart.series[0].addPoint(point, true, shift); // <---- update chart if you received a new point 
        setTimeout(function(){ 
        requestData(point); // <---- call the requestData with new point -- as old point for next call 
        }, 1000); 
       } 
       else{ 
        setTimeout(function(){ 
        requestData(oldPoint);// <---- because you received a duplicate point in this call, try again with old point 
        },1000); 
       }          
       // call it again after one second    

     }, 
     cache: false 
    }); 
}

現在從圖表的load事件中的第一個電話的樣子requestData([null,null])。起初oldPoint參數將是null，因此它總是會添加第一個點，然後從那裏開始每次遞歸都會在添加到系列之前檢查點的唯一性。如果point與oldPoint相同，它只是重新請求新的點！

來源

2017-04-12 04:57:27 Shaunak

謝謝，但我似乎無法工作。這個關鍵點就像json對象這樣''[1491974707000，-2.15]'，我只想在圖更新之前檢查第二個元素的唯一性。 – anagnam

好吧，然後檢查第二個元素，如下所示：'if（point [1]！== oldPoint [1]）'但記得改變初始調用requestData（[null，null]）''。我已經更新了答案以反映這一點。 – Shaunak

謝謝，它的工作！ – anagnam

-1

在requestData（）之外設置一個空變量，如lastPoint。

在添加新獲取的點之前，先獲取該變量並將其與剛剛獲得的值進行比較。如果它們相同，那麼在下一輪之前跳過添加該點。如果不同，請添加該點並將lastPoint設置爲新值。

來源

2017-04-12 04:57:05 Difster

像這樣設置全局變量是一個非常糟糕的編碼習慣。特別是當你只需使用已經發生的遞歸就可以輕鬆避免它。 – Shaunak

如何更新HighCharts中唯一數據的圖表

回答

相關問題