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

  1. vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...

  2. LightningChart® JS BS端结合框架模拟心电图实例

    简介 用于 .NET 与 Web 的高性能图表控件 官网地址 英文官网地址:https://www.arction.com/ API地址 进入到LightningChart® JS 下的Resourc ...

  3. jQuery HighchartsTableHTML表格转Highcharts图表插件

    版权申明 jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布 本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Hig ...

  4. 在asp.net中如何自己编写highcharts图表导出到自己的服务器上来

    1.准备工作: 网上下载highcharts导出的关键dll.       1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图:       2).itext ...

  5. JQuery Highcharts图表控件使用说明

    JQuery Highcharts图表控件使用说明 Highcharts 官网:http://www.highcharts.com Highcharts 官网示例:http://www.highcha ...

  6. highcharts图表高级入门之polar：极地图的基本配置以及一些关键配置说明

    highcharts图表组件内的极地图polar的实现和效果都还是很简单和美观的. 1.需要设置chart的polar属性为true:以表示是极地图: 2.其他的设置和普通图表就没什么区别了的,这里附 ...

  7. vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件

    vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...

  8. highCharts图表入门简介

    一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在We ...

  9. matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例

    从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...

最新文章

  1. 什麽样的资料集不适合用深度学习?
  2. 什么是星型模型和雪花型模型【转载】
  3. HTC推出新款VR头显，奇怪的是只在日本销售
  4. 空闲数据概念_计算机组成原理复习笔记——基础概念（二）
  5. Teamviewer连接服务器显示不能够全屏 或 向日葵连接服务器不能够全屏 或 Teamviewer只显示一个640x480的分辨率选项
  6. javascript高级程序设计之引用类型
  7. 计算机缺失esul.dll,SceneUI.ES.dll
  8. MFC初探 —— 设置软件开机自启
  9. Linux基础（13）文本查找利器find的使用方法
  10. SEO 搜索引擎优化技巧
  11. Verilog奇偶校验_zt
  12. Wunderlist – 免费同步 Todo List
  13. 大数据的应用领域有哪些
  14. linux格式化挂载的硬盘,linux格式化和挂载硬盘
  15. 在不同领域，大家用爬虫怎么盈利的-Java网络爬虫系统性学习与实战系列（4）
  16. 【在线仿真】Arduino 超声波测距+LCD1602显示
  17. 深度学习在计算机视觉中的应用
  18. 【分享】《小强升职记》读书笔记分享1
  19. BroadCastReceiver 与 startService
  20. 外贸人如何使用intbell挖掘优质客户

热门文章

  1. php 文件夹打包zip压缩包
  2. JAVA读取WORD,EXCEL,POWERPOINT,PDF文件的方法
  3. linux统计文件单词数,Linux怎么统计文本的的行数/单词数和字符数?
  4. 计算机专业处理器和显卡,45.显卡篇-处理器显卡和独立显卡哪个好-电脑自学网...
  5. 点击按钮获取listview网上数据
  6. torch中manual_seed的作用
  7. $this-assign('manualList', $manualList)是什么意思
  8. C语言编程＞第二周 ⑥ 一球从100米高度自由落下，每次落地后反跳回原高度的一半；再落下，求它在第10次落地时，共经过多少米？第10次反弹多高？
  9. 使用python导出msc.marc后处理数据——PyPost介绍
  10. 深度学习寿命预测技术路线