highCharts图表应用-模拟心电图

通过前两章的学习,相信大家对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图表应用-模拟心电图

转载于:https://www.cnblogs.com/hongzai/p/3210499.html

你可能感兴趣的:(highCharts图表应用-模拟心电图)