脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → highcharts动态刷新

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

 更新时间：2016年05月28日 14:51:53   投稿：jingxian  
下面小编就为大家带来一篇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轴动态刷新数据的实现代码 就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS之延时器和定时器执行示例详解

    JS之延时器和定时器执行示例详解

    这篇文章主要为大家介绍了JS之延时器和定时器执行示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • 理解javascript中的with关键字

    理解javascript中的with关键字

    这篇文章主要帮助大家理解javascript中的with关键字，学习with关键字的作用，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • js实现文本上下来回滚动

    js实现文本上下来回滚动

    本文主要分享了js实现文本上下来回滚动的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • layui的表单验证支持ajax判断用户名是否重复的实例

    layui的表单验证支持ajax判断用户名是否重复的实例

    今天小编就为大家分享一篇layui的表单验证支持ajax判断用户名是否重复的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实现猜数字游戏

    JavaScript实现猜数字游戏

    这篇文章主要为大家详细介绍了JavaScript实现猜数字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • ECharts鼠标事件的处理方法详解

    ECharts鼠标事件的处理方法详解

    最近一直在使用echarts,当然也被其中的各种属性整的有些头大,这篇文章主要给大家介绍了关于ECharts鼠标事件处理的相关资料,需要的朋友可以参考下
    2021-06-06
  • 微信小程序引入Vant框架的全过程记录

    微信小程序引入Vant框架的全过程记录

    Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用,这篇文章主要给大家介绍了关于微信小程序引入Vant框架的相关资料,需要的朋友可以参考下
    2021-06-06
  • JavaScript解构赋值的5个常见场景与实例教程

    JavaScript解构赋值的5个常见场景与实例教程

    解构赋值是一种特殊的语法,它使我们可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便,下面这篇文章主要给大家介绍了关于JavaScript解构赋值的5个常见场景与实例的相关资料,需要的朋友可以参考下
    2021-11-11
  • javascript奇异的arguments分析

    javascript奇异的arguments分析

    在 Javascript 的函数中有个名为 arguments 的类数组对象。它看起来是那么的诡异而且名不经传，但众多的 Javascript 库都使用着它强大的功能。所以，它的特性需要每个 Javascript 程序员去熟悉它。
    2010-10-10
  • js中单引号与双引号冲突问题解决方法

    js中单引号与双引号冲突问题解决方法

    这篇文章介绍了js中单引号与双引号冲突问题解决方法，有需要的朋友可以参考一下
    2013-10-10

最新评论