效果图：

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轴动态刷新数据的更多相关文章

  1. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  2. 改变highCharts的X轴和Y轴的数据刻度

    xAxis:{ tickPixelInterval:10 //自行调整X轴刻度的间距}, yAxis:{ lineWidth:1, //Y轴默认不显示Y轴线,添加一个轴线的宽度就可以显示出来 tick ...

  3. highcharts多个Y轴

    http://blog.sina.com.cn/s/blog_6a53599101019qax.html 多个Y轴的实现方法在于把yAxis设置成一个数组,里面的一个对象代表一条Y轴,利用opposi ...

  4. HighCharts实现双Y轴

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...

  5. echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件

    1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...

  6. [办公应用]如何制作二Y轴图（excel）

    有时候我们会遇到一种图表,就是X轴一致,可是Y轴的数据相差很大.如下图中,年龄和收入就不是一个数量级,在图表中显示的时候,“年龄”的曲线根本看不到(表中数据仅供举例): 解决的方法就是使用双Y轴显示, ...

  7. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  8. highcharts设置Y轴范围及根据Y轴范围设置不同颜色

    yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...

  9. Echart实现多个y轴，坐标轴的个数及名称由后台传过来的json数据决定。

    yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...

随机推荐

  1. 【MySQL】mysql中any，in，some，all的区别

    子查询就是指在一个select语句中嵌套另一个select语句. any,in,some,all分别是子查询关键词之一, any 可以与=.>.>=.<.<=.<> ...

  2. OpenCV 学习笔记 01 安装OpenCV及相关依赖库

    本次学习是基于Window10进行的.语言为python3. 1 与opencv相关的库简介 1.1 numpy numpy 是 OpenCV 绑定 python 时所依赖的库,此意味着numpy在安 ...

  3. 【转】Lisp 已死，Lisp 万岁！

    Lisp 已死,Lisp 万岁! 有一句古话,叫做“国王已死,国王万岁!”它的意思是,老国王已经死去,国王的儿子现在继位.这句话的幽默,就在于这两个“国王”其实指的不是同一个人,而你咋一看还以为它自相 ...

  4. U811.1接口EAI系列之五--材料出库--VB语言

    主要业务有:09其他出库单 11:材料出库单 32:销售出库单 主要业务代码: '材料出库生成XML Public Function xml_storeout(ds_head As MSHFlexGr ...

  5. 网页端，JSON导成CSV文件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. html中的a标签

    <a> 标签定义超链接,用于从一张页面链接到另一张页面.最重要的属性是 href 属性,它指示链接的目标,<href="#">表示跳转到自己.我们通常通过C ...

  7. hackerrank-knapsack

    https://www.hackerrank.com/challenges/unbounded-knapsack 题目描述: #include <iostream> #include &l ...

  8. 如何分析Java程序中的死锁

    使用下面方式:产生java的Thread Dump信息 windows平台上:ctrl+break 或者 ctrl+(fn+b)键 Linux平台上:kill -3 pid (查找程序进程id -&g ...

  9. 关于 IOS code signe 和 Provisioning Files 机制 浅析

    可以先读下这个译文. http://www.cnblogs.com/zilongshanren/archive/2011/08/30/2159086.html 读后,有以下疑惑. 在mac 机上生成的 ...

  10. 利用sdkman安装kotlin和java环境

    如果想在命令行下面运行kotlin程序,最省事的办法就是用sdkman来安装了: 1.安装sdkman: curl -s "https://get.sdkman.io" | bas ...