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

設(shè)置實況圖

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

設(shè)置服務(wù)器

在這個例子中，我們有一個返回JavaScript時間的JavaScript數(shù)組和一個隨機(jī)的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);

?>

全范圍內(nèi)定義變量圖表

我們想從已設(shè)置好的文檔功能和requestData功能訪問圖表，我們可以全范圍內(nèi)定義變量圖表。如果圖表變量在文件內(nèi)部反饋功能中被定義，無法在全局范圍使用。

var chart; // global

設(shè)置requestData功能

這個例子，我們使用 jQuery's $.ajax 方法完成Ajax工作，但也可以使用任何其他Ajax框架。當(dāng)服務(wù)器成功接收到數(shù)據(jù)，字符串重新運(yùn)算求出參數(shù)的內(nèi)容，使用Highcharts addPoint并添加進(jìn)圖表數(shù)據(jù)系列。如果數(shù)據(jù)系列長度比20大，我們改變第一個點(diǎn)，然后系列會移動到左邊而不是和點(diǎn)靠得更緊。

/**

* 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

});

}

創(chuàng)建圖表

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

$(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: []

}]

});

});

相關(guān)資源：

圖表highcharts

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

文章轉(zhuǎn)載自：慧都控件網(wǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。