假设图表容器的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. 更多参考内容

HighCharts#Series.setData

最新文章

  1. 常见端口 HTTP代码
  2. 关于js原型继承
  3. Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
  4. SpringMVC学习系列(6) 之 数据验证
  5. 实验六 序列信号检测器的VHDL设计
  6. std::list
  7. ORACLE 一致性读原理记录
  8. Base64编解码Android和ios的例子,补充JNI中的例子
  9. [swustoj 1091] 土豪我们做朋友吧
  10. 戴尔笔记本win8.1+UEFI下安装Ubuntu14.04过程记录
  11. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
  12. Java面试题集(136-150)
  13. spring boot + vue + element-ui全栈开发入门——windows开发环境
  14. DotNetCore跨平台~Dapper的使用
  15. Java(日期、随机数、系统工具类)
  16. Web API中的消息处理程序(Message Handler)
  17. django + nginx + uwsgi
  18. Mac下搭建react及bable
  19. 【Tomcat】Servlet 工作原理解析
  20. 001-dubbo基础-001-服务化最佳实践、异常处理逻辑

热门文章

  1. Activiti进阶(二)——部署流程资源的三种方式
  2. POJ 1753 bfs+位运算
  3. ajax ajax基本介绍
  4. linux page table entry struct
  5. POJ 2195 Going Home 最小费用流 难度:1
  6. Vue SSR的渲染性能
  7. bzoj3601
  8. python 数据科学
  9. NETGEAR WNDR3800CH openwrt 不能用新版, Barrier Breaker 14.07
  10. 最小生成树之克鲁斯卡尔(Kruskal)算法