HighCharts定时刷新图表
2024-09-28 01:02:33
假设图表容器的id为exChart,如下:
<div style="height:450px;" id="chart">
1. 首先在series中声明id,如下:
series: [{
id : 'exSeries', // id声明为exSeries
name : '测试数据',
data : [] // 填充需要的数据
}]
2. 创建定时器刷新数据
// 首先获取serie
var exSeries = $('#chart').highcharts().get('exSeries');
// 设置定时器, 5秒刷新一次
setInterval(function() {
// 设置需要显示的数据
var data = [1, 3, 5, 3, 1];
// 第2个参数表示是否重绘,第3个参数表示是否启用动画,第4个参数表示是否更新数据点[数组长度一样时建议false]
exSeries.setData(data, true, false, false);
}, 5000);
3. 数据更新建议
如果要实现实时数据的增量效果,即数据总是从右向左推进,可考虑将data设置为变量,然后在数据的头部弹出一个数字,在数据的尾部压入一个数字,如下:
// 加入当前数组有5个元素
var data = [1, 3, 5, 3, 1];
// 随机创建一个数字,或从服务器获取一个数字
var now = Math.random() * 10;
// 从头部弹出一个数字
data.shift();
// 把获取到的数据压入尾部
data.push(now);
// 最后设置数据,即可实现曲线、趋势线从右向左的动态效果
exSeries.setData(data, true, false, false);
刷新X轴数据采用setCategories方法,如:$('#chart').highcharts().xAxis[0].setCategories(date);
3. 更多参考内容
最新文章
- 常见端口 HTTP代码
- 关于js原型继承
- Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
- SpringMVC学习系列(6) 之 数据验证
- 实验六 序列信号检测器的VHDL设计
- std::list
- ORACLE 一致性读原理记录
- Base64编解码Android和ios的例子,补充JNI中的例子
- [swustoj 1091] 土豪我们做朋友吧
- 戴尔笔记本win8.1+UEFI下安装Ubuntu14.04过程记录
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
- Java面试题集(136-150)
- spring boot + vue + element-ui全栈开发入门——windows开发环境
- DotNetCore跨平台~Dapper的使用
- Java(日期、随机数、系统工具类)
- Web API中的消息处理程序(Message Handler)
- django + nginx + uwsgi
- Mac下搭建react及bable
- 【Tomcat】Servlet 工作原理解析
- 001-dubbo基础-001-服务化最佳实践、异常处理逻辑