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

設置實況圖

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

設置服務器

在這個例子中，我們有一個返回JavaScript時間的JavaScript數組和一個隨機的y值。下載文件live-server-data.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功能訪問圖表，我們可以全范圍內定義變量圖表。如果圖表變量在文件內部反饋功能中被定義，無法在全局范圍使用。

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功能是如何開始從圖表負載事件中呼出的，初始數據是空數組。

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

defaultSeriesType: 'spline',

events: {

load: requestData

}

},

title: {

text: 'Live random data'

},

xAxis: {

type: 'datetime',

tickPixelInterval: 150,

maxZoom: 20 * 1000

},

yAxis: {

minPadding: 0.2,

maxPadding: 0.2,

title: {

text: 'Value',

margin: 80

}

},

series: [{

name: 'Random data',

data: []

}]

});

});

相關資源：

圖表highcharts

本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至hey@evget.com

文章轉載自：慧都控件網

總結

以上是生活随笔為你收集整理的实况服务器制作,用Highcharts预处理实时数据及实况图表制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。