首页 > 网站 > WEB开发 > 正文

highcharts动态图表

2024-04-27 15:09:15
字体:
来源:转载
供稿:网友
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script><div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

$(document).ready(function () {    Highcharts.setOptions({        global: {            useUTC: false        }    });    Highcharts.chart('container', {        chart: {            type: 'line',            animation: Highcharts.svg, // don't animate in old IE            marginRight: 10,            events: {                load: function () {                    // set up the updating of the chart each second                    var series = this.series[0];                    var series2 = this.series[1];                    setInterval(function () {                        var x = (new Date()).getTime(), // current time                            y = Math.random();                        series.addPoint([x, y], true, true);                        series2.addPoint([x-1, y-1], true, true);                    }, 1000);                }            }        },        title: {            text: 'Live random data'        },        xAxis: {            type: 'datetime',            tickPixelInterval: 150        },        yAxis: {            title: {                text: 'Value'            },            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);            },            shared: false,            crosshairs: true,            plotOptions: {                /*spline: {                    marker: {                        radius: 4,                        lineColor: '#666666',                        lineWidth: 1,                        enabled: false                    }                },                */            }        },        legend: {            enabled: false        },        exporting: {            enabled: false        },        series: [{            name: 'Random data',            marker: {              enabled: false            },            data: (function () {                // generate an array of random data                var data = [],                    time = (new Date()).getTime(),                    i;                for (i = -19; i <= 0; i += 1) {                    data.push({                        x: time + i * 1000,                        y: Math.random()                    });                }                return data;            }())        },        {            name: 'Random data2',            marker: {              enabled: false            },            data: (function () {                // generate an array of random data                var data = [],                    time = (new Date()).getTime(),                    i;                for (i = -19; i <= 0; i += 1) {                    data.push({                        x: time + i * 1000,                        y: Math.random()                    });                }                return data;            }())        }        ]    });});


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表