w3ctech

highcharts 实时刷新多条曲线要怎么实现嘞

按照highchart官网上 写了一个实时刷新的 曲线。

Highcharts.setOptions({ global: { useUTC: false } }); 
        var chart;
        $("#timedata-chart").highcharts({
            chart: {
                type: 'spline',
                events: {
                    load: function(){
                        var series=this.series[0];
                        setInterval(function(){
                            var currentDate=new Date();
                            var x=currentDate.getTime(),
                                y=Math.random();
                            series.addPoint([x,y],true,true);
                        },60*120);
                    }
                }
            },
            title: {text:'datatime'},
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 80,
                dateTimeLabelFormats: {
                    month: '%e. %b',
                    year: '%b'
                }
            },
            yAxis: {
                title: {text: '用户'},
                tickInterval: 0.1,
                min: 0,
                max: 2,
                lineWidth: 1
            },
            series: [{
                name: 'Random data',
                data: (function(){
                    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;
                }())

            }],
            credits: {enabled: false}
        });

现在问题来了,要刷新两条曲线要怎么做呢,走过路过的大大,不要嫌弃我废柴啊。

前端圈微信

扫码关注前端圈微信公众号

共收到4条回复

  • load方法里

    var series=this.series[0];
    

    在加一条不就可以了么?

    回复此楼
  • 我试试,是有几条线就加几个么。

    回复此楼
  • 多的话 循环下呗

    回复此楼
  • $(function () { Highcharts.setOptions({ // This is for all plots, change Date axis to local timezone global : { useUTC : false } }); var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            zoomType: 'xy'
        },
    
        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [
                [Date.UTC(2010, 0, 1, 10), 29.9],
                [Date.UTC(2010, 0, 1, 20), 71.5],
                [Date.UTC(2010, 0, 2, 10), 106.4],
                [Date.UTC(2010, 0, 2, 20), 129.2],
                [Date.UTC(2010, 0, 3, 10), 144.0],
                [Date.UTC(2010, 0, 3, 20), 176.0],
                [Date.UTC(2010, 0, 4, 10), 186.0],
                [Date.UTC(2010, 0, 4, 20), 206.0]
             ]
        }]
    
    });
    

    });

    回复此楼