highcharts实时刷新曲线图,动态修改Y轴的最大最小值

利用highcharts来实现动态交互图,通过定时任务,每隔一段时间塞入新的数据,且保持显示的数据量不变;

再根据显示的数据来动态调整坐标Y轴的上下限,使图表能显示的更符合要求。

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

//最大最小值初始化
var intMinmun = 2;
var intMaxmun = 10;


function activeLastPointToolip(chart) {
    var points = chart.series[0].points;
    chart.tooltip.refresh(points[points.length -1]);
}


var chart = Highcharts.chart('container', {
    chart: {
        type: 'spline',
        marginRight: 10,
        events: {
            load: function () {
                var series = this.series[0],
                    chart = this;
                activeLastPointToolip(chart);
                setInterval(function () {
                    var x = (new Date()).getTime(), // 当前时间
                        y = Math.random()*10+5;          // 随机值
                    if(intMinmun > y){

                       //动态修改Y轴的最小值
                        chart.yAxis[0].update({min:y});

                        intMinmun = y;
                    }
                    if(intMaxmun < y){

                      //动态修改Y轴的最大值
                        chart.yAxis[0].update({max:y});

                        intMaxmun = y;
                    }

                    series.addPoint([x, y], true, true);
                    activeLastPointToolip(chart);
                }, 1000);
            }
        }
    },
    title: {
        text: '动态模拟实时数据'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        min:intMinmun,
        max:intMaxmun,

        title: {
            text: null
        }
    },
    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
    },
    series: [{
        name: '随机数据',
        data: (function () {
            // 生成随机值
            var data = [],
                time = (new Date()).getTime(),
                i;
            for (i = -19; i <= 0; i += 1) {
                var mvalue = Math.random()*10+5;
                data.push({
                    x: time + i * 1000,
                    y: mvalue
                });

//比较最大最小值,并重新赋值
                if(intMinmun > mvalue){
                    intMinmun = mvalue;
                }
                if(intMaxmun < mvalue){
                    intMaxmun = mvalue;
                }

            }
            return data;
        }())
    }]
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值