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>
  • 相关阅读:
    mysql查的用法
    js和jquery的基本应用
    JS实现html页面点击下载文件
    十二、PHP变量以及变量间传值的用法
    十一、jQuery的基本用法
    十、MySQL的应用大全
    九、使用盒子布局 margin 与padding如何使用
    在 Apex 中使用合并统计查询
    Salesforce 的 package.xml 文件
    Salesforce 应用生命周期管理
  • 原文地址:https://www.cnblogs.com/sydeveloper/p/3608588.html
Copyright © 2011-2022 走看看