HighCharts动态折线图







var chart;

$(function() {


Highcharts.setOptions({

    global: {

        useUTC: false

    }

});

    chart = new Highcharts.Chart({

        chart: {

            renderTo: 'container', //图表放置的容器,DIV

            defaultSeriesType: 'spline', //图表类型为曲线图

            events: {

                load: function() { 

                    var series = this.series[0];

                    //每隔5秒钟,图表更新一次,y数据值在0-100之间的随机数

                    setInterval(function() {

                        var x = (new Date()).getTime(), // 当前时间

                        y = Math.random()*100; 

                        series.addPoint([x, y], true, true);

                    },

                    5000);

               }

            }

        },

        title: {

            text: ''  //图表标题

        },

        xAxis: { //设置X轴

            type: 'datetime',  //X轴为日期时间类型

            tickPixelInterval: 80 //X轴标签间隔

        },

        yAxis: { //设置Y轴

            title : {

useHTML : true,

text : "流量"

},

            max: 100, //Y轴最大值

            min: 0  //Y轴最小值

        },

        tooltip: {//当鼠标悬置数据点时的提示框

            formatter: function() { //格式化提示信息

                return '时间:'+

                Highcharts.dateFormat('%H:%M:%S', this.x) +';流量: '+ 

                Highcharts.numberFormat(this.y, 2);

            }

        },

        legend: {

            enabled: true  //设置图例不可见

        },

        exporting: {

            enabled: false  //设置导出按钮不可用

        },

        series: [{

name: "流量1",

            data: (function() { //设置默认数据,

                var data = [],

                time = (new Date()).getTime();

           

for(var i = 0; i <= 23; i++) {

data.push({

x: time + i * 60 * 1000, 

y: Math.random()*100 

});

}


                return data;

            })()

        }]

    });

});


 

你可能感兴趣的:(Highcharts)