通过前两章的学习，相信大家对highcharts已经有了初步的了解。这一章将通过一个例子来模拟Highcharts如何实现经常变化的数据显示。
比如说股票的涨停、实时篮球比分以及A选手和B选手的支持率。这样的例子在生活中有很多，就不一一列举了。
实现的思路主要还是通过setInterval()方法，隔几秒刷新数据,来实现动态数据的显示。废话不多说，直接上代码。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
$(
function
() {
// 设置全局的时区
Highcharts.setOptions({
global : {
useUTC :
false
}
});
new
Highcharts.Chart({
chart : {
renderTo :
'gridTable2'
,
// 放置图表的DIV容器对应页面的id属性
type :
'spline'
,
// 图表类型line, spline, area, areaspline
// 事件
events : {
load :
function
() {
var
series =
this
.series[0];
// 每隔1秒钟，图表更新一次，y数据值在0-100之间的随机数
setInterval(
function
() {
var
x = (
new
Date()).getTime();
var
y = Math.random() * 100;
series.addPoint([ x, y ],
true
,
true
);
}, 1000);
},
}
},
title : {
text :
'模拟心电图'
// 图表标题
},
subtitle : {
text :
'XXXX'
// 副标题
},
// x轴
xAxis : {
// X轴为日期时间类型
type :
'datetime'
,
// X轴标签间隔
tickPixelInterval : 50
},
// y轴
yAxis : {
title :
''
,
max : 100,
// Y轴最大值
min : 0
},
// 右下角显示的LOGO
credits : {
text :
'demo'
,
// 设置LOGO区文字
href :
'http://www.javakfz.com'
// 设置LOGO链接地址
},
// 是否启用导出功能，默认为true
exporting : {
enabled :
true
},
legend : {
enabled :
false
},
// 当鼠标悬置数据点时的格式化提示
tooltip : {
crosshairs :
true
,
formatter :
function
() {
return
'心率
'
+ Highcharts.dateFormat(
'%H:%M:%S'
,
this
.x)
+
'
'
+ Highcharts.numberFormat(
this
.y, 2);
}
},
plotOptions : {
column : {
dataLabels : {
enabled :
true
},
pointPadding : 0.2,
borderWidth : 0
}
},
// 设置默认数据
series : [ {
data : (
function
() {
// 设置默认数据，
var
data = [];
var
time = (
new
Date()).getTime();
var
i;
for
(i = -19; i <= 0; i++) {
data.push({
x : time + i * 1000,
y : Math.random() * 100
});
}
return
data;
})()
} ]
});
});
|
主要的代码还是没有多少变化，最重要的是在events里面加入了一个load方法。再利用setInterval方法每隔一秒更新图像。效果图：
图像每隔一秒就会发生变化。当然这只是一个模拟图。通过前面几章，大家可以发现形成图像的数据都是js里面定好的。可不可以用动态数据作为数据源呢？比如说数据都是从数据库查询得到的。答案是肯定的，下一章就着重讲解利用Struts2+json+highCharts生成柱状图。
原创文章，转载请注明： 转载自java开发者
本文链接地址: highCharts图表应用-模拟心电图