永利最大(官方)网站

我们使用highcharts设置实况图，在图表被配置对象定义后，可选预处理和最终启用，以及渲染会使用新的Highcharts.Chart()。我们可以使用 API修改图表。图表、轴、系列以及点对象会有一系列方式，比如：更新、删除、 addSeries、 addPoints等。

设置实况图

接下来我们将进入主题，谈一谈如何使用Highcharts，让他以每秒甚至更精确的时间，从服务器索检数据运行实况图。这个工作是通过建立一个自定义函数、requestData，这些最初被称为图表负载事件和Ajax成功回调函数来实现的。

设置服务器

在这个例子中，我们有一个返回JavaScript时间的JavaScript数组和一个随机的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);
?>

全范围内定义变量图表

我们想从已设置好的文档功能和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下载
• highcharts插件及highcharts demo
• highcharts参数
• 深度解析highcharts 4.0