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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python做反被爬保护的方法
2019/07/01 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
python实现126邮箱发送邮件
2020/05/20 Python
Python操作Excel的学习笔记
2021/02/18 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
运动会表扬稿大全
2014/01/16 职场文书
运动会广播稿30字
2014/01/21 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
指导教师推荐意见
2015/06/05 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js