從數據庫中獲取的動態值，動態圖表繪製

Question

我想使用Highcharts樣條曲線動態地從數據庫中檢索情節值。問題是我不能找出一種方法來將值傳遞給Javascript函數而不刷新整個函數，這將從頭開始繪製整個圖。當前的代碼包含一個數組，它只是用一個數組和一個隨機函數來繪製生成新值。我想找到一種方法來使用PHP從數據庫中將新值插入到該數組中。問題是我不知道如何在不影響圖形的情況下繼續調用數據庫查詢。一些使用數據庫動態值動態繪製圖形的幫助將會很有幫助。

$(function() { 
    $(document).ready(function() { 
     Highcharts.setOptions({ 
      global: { 
       useUTC: false 
      } 
     }); 

     var chart; 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'spline', 
       marginRight: 10, 
       events: { 
        load: function() { 

         // set up the updating of the chart each second 
         var series = this.series[0]; 
         setInterval(function() { 
          var x = (new Date()).getTime(), // current time 
           y = Math.random(); 
          series.addPoint([x, y], true, true); 
         }, 1000); 
        } 
       } 
      }, 
      title: { 
       text: 'Trend analysis' 
      }, 
      xAxis: { 
       labels: { 
       rotation: 320 

      }, 
       type: 'datetime', 
       tickPixelInterval: 150 
      }, 
      yAxis: { 
       title: { 
        text: 'Value' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      credits:{ 
       enabled:false 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
         Highcharts.numberFormat(this.y, 2); 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      exporting: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Random data', 
       data: (function() { 
        // generate an array of random data 
        var data = [], 
         time = (new Date()).getTime(), 
         i; 

        for (i = -19; i <= 0; i++) { 
         data.push({ 
          x: time + i * 1000, 
          y: Math.random() 
         }); 
        } 
        return data; 
       })() 
      }] 
     }); 
    }); 

}); 

Answer 1

您正在查找的技術稱爲ajax。這就是javascript在沒有整個頁面加載的情況下從服務器請求更多數據的地方。基本方法是：

1. 該頁面已加載並呈現初始圖表。
2. 該頁面然後向用戶請求附加數據。在jQuery中，這是通過調用$ .ajax來完成的
3. 服務器響應更多的數據。
4. JavaScript的加載此數據轉換成使用chart.series.addpoint或chart.series.setData圖表。
5. 然後以規律的間隔重複步驟2至5。

Highcharts在這裏有很好的文章：http://docs.highcharts.com/#preprocessing-live-data以及一些示例代碼。您需要修改php才能讀取數據庫中的數據，並且您可能希望更改javascript中的移位邏輯，具體取決於您希望老點落下還是留在圖表上。

如果你的系列不是太大，每次返回整個數據集並不是不合理的，而是使用chart.series.setData來替換整個系列，而不是逐點完成。 API調用，你需要在這裏記載：http://api.highcharts.com/highcharts#Series