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实现在小方框中浏览大图的代码
Aug 14 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
javascript 数组的方法集合
Jun 05 Javascript
JavaScript 学习技巧
Feb 17 Javascript
Javascript调用C#代码
Jan 17 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
js转义字符介绍
Nov 05 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
动态更新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
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
php二维码生成
2015/10/19 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
Python导入txt数据到mysql的方法
2015/04/08 Python
Python中的random()方法的使用介绍
2015/05/15 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python线程中同步锁详解
2018/04/27 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python 并发下载器实现方法示例
2019/11/22 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
思想品德自我鉴定
2013/10/12 职场文书
教学器材管理制度
2014/01/26 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
教育见习报告范文
2014/11/03 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2014年节能工作总结
2014/12/18 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫