zoukankan      html  css  js  c++  java
  • 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,
                         1,
                        color: '#808080'
                    }]
                },
                {
                    title: {
                        text: 'Name'
                    },
                    plotLines: [{
                        value: 0,
                         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-700px;height:400px"></div>
    </body>
  • 相关阅读:
    spring cloud 和 阿里微服务spring cloud Alibaba
    为WPF中的ContentControl设置背景色
    java RSA 解密
    java OA系统 自定义表单 流程审批 电子印章 手写文字识别 电子签名 即时通讯
    Hystrix 配置参数全解析
    spring cloud 2020 gateway 报错503
    Spring Boot 配置 Quartz 定时任务
    Mybatis 整合 ehcache缓存
    Springboot 整合阿里数据库连接池 druid
    java OA系统 自定义表单 流程审批 电子印章 手写文字识别 电子签名 即时通讯
  • 原文地址:https://www.cnblogs.com/sydeveloper/p/3608588.html
Copyright © 2011-2022 走看看