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

設(shè)置實(shí)況圖

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

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

在這個(gè)例子中，我們有一個(gè)返回JavaScript時(shí)間的JavaScript數(shù)組和一個(gè)隨機(jī)的y值。下載文件

<?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功能訪問(wèn)圖表，我們可以全范圍內(nèi)定義變量圖表。如果圖表變量在文件內(nèi)部反饋功能中被定義，無(wú)法在全局范圍使用。

var chart; // global

設(shè)置requestData功能

這個(gè)例子，我們使用 jQuery's $.ajax 方法完成Ajax工作，但也可以使用任何其他Ajax框架。當(dāng)服務(wù)器成功接收到數(shù)據(jù)，字符串重新運(yùn)算求出參數(shù)的內(nèi)容，使用Highcharts addPoint并添加進(jìn)圖表數(shù)據(jù)系列。如果數(shù)據(jù)系列長(zhǎng)度比20大，我們改變第一個(gè)點(diǎn)，然后系列會(huì)移動(dòng)到左邊而不是和點(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功能是如何開(kāi)始從圖表負(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下載
• highcharts插件及highcharts demo
• highcharts參數(shù)
• 深度解析highcharts 4.0