Highcharts 多个Y轴动态刷新数据的实现代码


Posted in Javascript onMay 28, 2016

效果图:

Highcharts 多个Y轴动态刷新数据的实现代码

js代码:

$(function() {
  $(document).ready(function() {
    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });
    var chart;
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'spline',
        animation: Highcharts.svg,
        // don't animate in old IE        
        marginRight: 10,
        events: {
          load: function() {}
        }
      },
      title: {
        text: 'Live random data'
      },
      xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
      },
      yAxis: [{
        title: {
          text: 'Value'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      {
        title: {
          text: 'Name'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      }],
      tooltip: {
        formatter: function() {
          return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
        }
      },
      legend: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      series: [{
        name: 'Random data',
        data: (function() { // generate an array of random data               
          var data = [],
          time = (new Date()).getTime(),
          i;
          for (i = -19; i <= 0; i++) {
            data.push({
              x: time + i * 1000,
              y: Math.random()
            });
          }
          return data;
        })()
      },
      {
        name: 'Random data',
        data: (function() { // generate an array of random data               
          var data = [],
          time = (new Date()).getTime(),
          i;
          for (i = -19; i <= 0; i++) {
            data.push({
              x: time + i * 1000,
              y: Math.random()
            });
          }
          return data;
        })()
      }]
    }); // set up the updating of the chart each second           
    var series = chart.series[0];
    var series1 = chart.series[1];
    setInterval(function() {
      var x = (new Date()).getTime(),
      // current time     
      y = Math.random();
      series.addPoint([x, y + 1], true, true);
      series1.addPoint([x, y - 1], true, true);
    },
    1000);
  });
});

html代码:

<head>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/highcharts.js"></script>
 <script type="text/javascript" src="js/exporting.js"></script>
 <script>
  //左侧Javascript代码
 </script>
</head>
<body>
 <div id="container" style="min-width:700px;height:400px"></div>
</body>

以上这篇Highcharts 多个Y轴动态刷新数据的实现代码 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象思想 附源码
Jul 07 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
table行随鼠标移动变色示例
May 07 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
动态更新highcharts数据的实现方法
May 28 #Javascript
不同js异步函数同步的实现方法
May 28 #Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 #Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 #Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 #Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 #Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python软件都是免费的吗
2020/06/18 Python
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
如何安装ruby on rails
2014/02/09 面试题
酒店员工检讨书
2014/02/18 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
股份合作协议书范本
2014/04/14 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
导游词之包公祠
2019/11/25 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js