[置顶] 基于highcharts.js多条曲线动态图（时序图）
Highcharts 是一个用纯JavaScript编写的一个图表库，在web前端展示中可以做出很炫的图表，目前手头有一个指标监控项目，需要采用动态展示(典型XY曲线，时间轴)。贡献出一个例子供大家参考，本例子是参考highchart官方动态显示示例。
实现的方法：由于指标显示不尽一致，例如有些是CPU时间，交易量，等等。但又有一些相似之处，如都是XY型（时间为X），都包含基线（多条曲线）等，基于这种特征，需要写一个通用的接口，方便多指标复用通用展示模块。采用JSON格式交换数据。
代码主要是HTML & JS。如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>实时界面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="realshow.js"></script>
</head>
<body>
<div id="context_chart"></div>
</body>
</html>
js代码分析，
1.createXYTimeChartOptions函数，根据应用传递的参数定制图标的标题，坐标轴信息，有一个问题，显示的时候需要传递历史数据信息，需要给series设置缓存大小，用户可以根据需求设置（例如传递前十分钟数据），同时此函数里面可以自行修改时间格式(本例子最小单位为分钟)等等。
2.inputXYData2ChartSeries函数，动态给图中input数据。用户需要自行编写与后台对接的数据，并以JSON格式返回。
3.test_create_xy_time_chart示例函数，创建一个两条曲线的动态图
4.test_action()示例函数，动态加入随机数据
要求，jquery和highchart库
展示效果如下如：
![[置顶] 基于highcharts.js多条曲线动态图（时序图）_第1张图片](http://img.e-com-net.com/image/info5/617d38f6e1d341c28d932cbf8b81c1d3.jpg)
realshow.js源码如下所示：
var chartSeries = new Array();
var prevTime = "";
function removeChartAttr() {
$('#context_chart').removeAttr();
}
function createXYTimeChartOptions(appData) {
Highcharts.setOptions({
global : {
useUTC : false
}
});
var highchartOptions = {
chart : {
type : 'spline',
animation : Highcharts.svg,
marginRight : 20,
events : {
load : function() {
chartSeries = this.series;
}
}
},
title : {
text : appData.title
},
legend : {
enabled : true,
align : 'center',
verticalAlign : 'bottom',
x : 0,
y : 0
},
xAxis : {
title : {
text : appData.xTitle
},
type : 'datetime',
tickWidth : 1,
labels : {
x : 0,
y : 20,
style : {
color : '#000000'
},
formatter : function() {
return Highcharts.dateFormat('%H:%M', this.value);//设置时间显示格式
}
}
},
yAxis : {
title : {
text : appData.yTitle//设置y轴标题
},
plotLines : [ {
value : 0,
width : 10,
color : '#808080'
} ]
},
tooltip : {//设置数据点tip效果，
backgroundColor : '#FCFFC5',
borderColor : 'black',
borderRadius : 10,
borderWidth : 3,
shadow : true,
animation : true,
style : {
color : "#ff0000",
fontSize : "12px",
fontWeight : "blod",
fontFamily : "Courir new"
},
formatter : function() {
return '<b>' + this.series.name + '</b><br/>' + 'Time: '
+ Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x)
+ '<br/>' + 'Value: '
+ Highcharts.numberFormat(this.y, 1);
}
},
credits : {
enabled : false
},
exporting : {
enabled : false
},
series : []
};
$.each(appData.series, function(index, value) {//这里用于设置显示历史缓冲区（历史数据，数组形式），也决定了数据点显示数目
highchartOptions.series.push({
name : value.name,
data : value.data,
lineWidth : 4,
});
});
return highchartOptions;
}
function inputXYData2ChartSeries(data_time,data_json_array) {
if(data_time == prevTime)
return;
// var x = (new Date(data_time.replace(/-/g, "/")));
// x = x.getTime() - x.getSeconds() * 1000;
$.each(data_json_array, function(index, val) {
chartSeries[index].addPoint([data_time, val], true, true);
});
prevTime = data_time;
}
function test_action(){
var currentDate = new Date();
var x = currentDate.getTime() - currentDate.getSeconds() * 1000;
var test_data = [];
test_data.push(Math.random());
test_data.push(Math.random());
inputXYData2ChartSeries(x,test_data);
}
function test_create_xy_time_chart() {
var input_json = {
title : "Test",
xTitle : "x title",
yTitle : "y title",
series : [],
};
var currentDate = new Date();
var currentMinute = currentDate.getTime() - currentDate.getSeconds() * 1000;
var data1 = [], time = currentMinute, i;
for (i = -12; i <= 0; i++) {
data1.push({
x : time + i * 60000,
y : Math.random()
});
}
input_json.series.push({
name : "line1",
data : data1
});
var data2 = [], time = currentMinute, i;
for (i = -12; i <= 0; i++) {
data2.push({
x : time + i * 60000,
y : Math.random()
});
}
input_json.series.push({
name : "line2",
data : data2
});
var highchart_options = createXYTimeChartOptions(input_json);
$('#context_chart').show();
$('#context_chart').highcharts(highchart_options);
var chart = $('#context_chart').highcharts();
//加了一条告警线，垂直于Y轴
chart.yAxis[0].addPlotLine({
value:0.5,
width:4,
color:'red',
id: 'plot-line-1'
});
}
$(document).ready(function() {
test_create_xy_time_chart();
window.setInterval(test_action, 1 * 60000);
});
转载请注明出处：http://blog.csdn.net/ccfeng2008/article/details/51284122