Highcharts實現實時數據處理方法

咱們使用highcharts設置實況圖，在圖表被配置對象定義後，可選預處理和最終啓用，以及渲染會使用新的Highcharts.Chart()。咱們能夠使用 API修改圖表。圖表、軸、系列以及點對象會有一系列方式，好比：更新、刪除、 addSeries、 addPoints等。

設置實況圖

接下來咱們將進入主題，談一談如何使用Highcharts，讓他以每秒甚至更精確的時間，從服務器索檢數據運行實況圖。這個工做是經過創建一個自定義函數、requestData，這些最初被稱爲圖表負載事件和Ajax成功回調函數來實現的。>>體驗一下

設置服務器

在這個例子中，咱們有一個返回JavaScript時間的JavaScript數組和一個隨機的y值。下載文件live-server-data.php

<!--?php // Set the JSON header header("Content-type: text/json");   // The x value is the current JavaScript time, which is the Unix time multiplied // by 1000. $x = time() * 1000; // The y value is a random number $y = rand(0, 100);   // Create a PHP array and echo it as JSON $ret = array($x, $y); echo json_encode($ret); ?-->

全範圍內定義變量圖表

咱們想從已設置好的文檔功能和requestData功能訪問圖表，咱們能夠全範圍內定義變量圖表。若是圖表變量在文件內部反饋功能中被定義，沒法在全局範圍使用。

1	var chart; // global

設置requestData功能

這個例子，咱們使用 jQuery's $.ajax 方法完成Ajax工做，但也能夠使用任何其餘Ajax框架。當服務器成功接收到數據，字符串從新運算求出參數的內容，使用Highcharts addPoint並添加進圖表數據系列。若是數據系列長度比20大，咱們改變第一個點，而後系列會移動到左邊而不是和點靠得更緊。

/**  * Request data from the server, add it to the graph and set a timeout  * to request again  */ function requestData() {     $.ajax({         url: 'live-server-data.php',         success: function(point) {             var series = chart.series[0],                 shift = series.data.length > 20; // shift if the series is                                                  // longer than 20             // add the point             chart.series[0].addPoint(point, true, shift);                          // call it again after one second             setTimeout(requestData, 1000);            },         cache: false     }); }

建立圖表

注意equestData功能是如何開始從圖表負載事件中呼出的，初始數據是空數組。
......

閱讀全文：用Highcharts預處理實時數據及實況圖表製做

相關資源：

• highcharts下載

• highcharts插件及highcharts demo

• highcharts參數

• 深度解析highcharts 4.0