Highcharts实现实时数据处理方法

时间 2019-11-09

原文原文链接

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

设置实况图

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

设置服务器

在这个例子中，咱们有一个返回JavaScript时间的JavaScript数组和一个随机的y值。下载文件live-server-data.phpajax

<!--?phpjson

// 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功能访问图表，咱们能够全范围内定义变量图表。若是图表变量在文件内部反馈功能中被定义，没法在全局范围使用。服务器

1框架	`var` `chart;` `// global`dom

设置requestData功能

这个例子，咱们使用 jQuery's $.ajax 方法完成Ajax工做，但也能够使用任何其余Ajax框架。当服务器成功接收到数据，字符串从新运算求出参数的内容，使用Highcharts addPoint并添加进图表数据系列。若是数据系列长度比20大，咱们改变第一个点，而后系列会移动到左边而不是和点靠得更紧。函数

/**url

* 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功能是如何开始从图表负载事件中呼出的，初始数据是空数组。
......