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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
taro开发微信小程序的实践
May 21 Javascript
Jquery Datatables的使用详解
Jan 30 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
用matplotlib画等高线图详解
2017/12/14 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
pymongo中group by的操作方法教程
2019/03/22 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
数控技术专业推荐信
2013/11/01 职场文书
工程部主管岗位职责
2013/11/17 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
保险经纪人求职信
2014/03/11 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
婚礼答谢词范文
2015/09/29 职场文书