我们使用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
文章转载自:慧都控件网