js图表之Highcharts通过ajax动态获取数据实时更新图表数据，实时更新Y,X轴数据，支持多条走势图
Highcharts图表插件是非常好用的，不看文档还是不知道怎么用，即使看文档也一时半会的写不出来，这里封装一个通用版的Highcharts图表用法，里边都是中文注释，手动设置即可。
Highcharts动态图表重要的一点就是events下的load属性，如下代码：
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'spline', // 图表类型 默认：spline（走势），line(折线)，column（柱状图），pie(饼图)
events: {
load: function () {
var series1 = this.series[0],series2 = this.series[1],chart = this;
setInterval(function () {
$.post(ajaxUrl,
{},
function(postData){
//console.log(postData[0]);
//[{"x":"17:29:31","y":"1"},{"x":"17:29:31","y":"8"}]
// 第一条线
var x = postData[0].x;
var y = postData[0].y;
y = Number(y);
series1.addPoint([x, y], true, true);
// 第二条线
var x = postData[1].x;
var y = postData[1].y;
y = Number(y);
series2.addPoint([x, y], true, true);
// 动态x轴数据
tempDataX.push(x);
chart.xAxis[0].setCategories(tempDataX);
},'json');
}, 1000);
}
}
},demo.html源码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
<!--
<script src="./js/6.1/highcharts.js"></script>
<script src="./js/6.1/exporting.js"></script>
<script src="./js/6.1/highcharts-zh_CN.js"></script>
-->
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="width:600px;height:600px"></div>
<script>
/*
1、注意：x轴同时显示个数 == 初始Y轴数据条数
2、初始x轴数据和ajax返回的x数据格式需要一致
*/
/*** 初始配置 STRAT ***/
//大标题
var titleBig = '水果实时销售数据';
//小标题
var titleMin = '';
// Y轴值说明/单位
var tempYvalue = '订 单 量 /笔';
// 打印导出组件是否展示
var printExport = true;
// highcharts logo版权信息是否展示
var copyrightFlag = true;
// 初始x轴数据
var tempDataX = ['15:50:01','15:50:02','15:50:03','15:50:04','15:50:05','15:50:06','15:50:07','15:50:08','15:50:09','15:50:10',];
// 初始Y轴数据-第一条线
var tempDateY1 = [{y:4},{y:6},{y:8.1},{y:9},{y:6},{y:5},{y:4},{y:3},{y:6},{y:9},];
// 初始Y轴数据-第二条线
var tempDateY2 = [{y:6},{y:5},{y:7},{y:10},{y:5},{y:8},{y:8},{y:4},{y:5},{y:3},];
// 第一条走势线名称
var tempYtitle1 = '橘子';
// 第二条走势线名称
var tempYtitle2 = '苹果';
// ajax url
var ajaxUrl = 'test.php';
/*** 初始配置 END ***/
/*** Highcharts 组件 ***/
Highcharts.chart('container', {
title: {
text: titleBig // 大标题
},
subtitle: {
text: titleMin // 小标题/注释等
},
// 图表基础配置
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'spline', // 图表类型 默认：spline（走势），line(折线)，column（柱状图），pie(饼图)
events: {
load: function () {
var series1 = this.series[0],series2 = this.series[1],chart = this;
setInterval(function () {
$.post(ajaxUrl,
{},
function(postData){
//console.log(postData[0]);
//[{"x":"17:29:31","y":"1"},{"x":"17:29:31","y":"8"}]
// 第一条线
var x = postData[0].x;
var y = postData[0].y;
y = Number(y);
series1.addPoint([x, y], true, true);
// 第二条线
var x = postData[1].x;
var y = postData[1].y;
y = Number(y);
series2.addPoint([x, y], true, true);
// 动态x轴数据
tempDataX.push(x);
chart.xAxis[0].setCategories(tempDataX);
},'json');
}, 1000);
}
}
},
// 版权信息是否显示
credits:{
enabled:true
},
// 打印导出配置
exporting:{
enabled:true
},
// 图例参数
legend: {
//floating:true,
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 50,
//labelFormat: '<span style="{color}">{name} (click to hide or show)</span>'
},
// 数据颜色分布（默认样式这里可以重定义）
colors: ['#7CB5EC','#ED561B','#FF9655', '#DDDF00','#50B432',
'#F564ED','#03F2E3','#17A0FA', '#7648FF', '#AAAAAA'],
//数据提示框（默认样式这里可以重定义）
tooltip: {
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
// 图标类型参数
plotOptions: {
pie: {
allowPointSelect: true,
//cursor: 'pointer',
dataLabels: {
enabled: true // 数据标题
},
showInLegend: true, // 图例展示开关
},
series: {
marker: {
enabled: false, /*数据点是否显示*/
},
}
},
//x轴
xAxis: {
categories: tempDataX, //x轴标签名称
gridLineWidth: 0, //设置网格宽度为1
lineWidth: 1, //基线宽度
labels:{y:26} //x轴标签位置：距X轴下方26像素
},
yAxis: {
title: {
text: tempYvalue,
}
},
// y轴 数据列
series: [
{
name: tempYtitle1,
data: tempDateY1
},
{
name: tempYtitle2,
data: tempDateY2
}
],
});
</script>
</body>
</html>注意：x轴同时显示个数 == 初始Y轴数据条数，初始x轴数据和ajax返回的x数据格式需要一致。
后端服务代码每次返回的数据格式为json数组：
[{"x":"17:41:09","y":5},{"x":"17:41:09","y":8}]后端服务器代码以php为例（当前时间随机返回数值）：
<?php
header('Access-Control-Allow-Origin:*');
header('Content-Type: text/html; charset=UTF-8');
$x = date('H:i:s');
$y1 = rand(1,9);
$d1 = array('x'=>$x,'y'=>$y1);
$y2 = rand(1,9);
$d2 = array('x'=>$x,'y'=>$y2);
$data = array($d1,$d2);
echo json_encode($data,true);
//或者直接拼接json字符串
//echo '[{"x":"'.$x.'","y":"'.$y1.'"},{"x":"'.$x.'","y":"'.$y2.'"}]';
