Question

我正在创建一个图表并每5分钟填充一次随机数据。我将xAxis数据范围设置为5小时，当从初始数据开始时，它的宽度在图表中已满，但是当连续添加点时，数据宽度正在减小。如何使其不减小系列宽度？

我有以下代码：

$(function () {
    var current_time = (new Date()).getTime()+300000;
    var now_time = (new Date()).getTime();
    var zone_name = ['A','B','C'];

    $(document).ready(function() {

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

        $('#container').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg,
                marginRight: 10,
                events: {
                    load: function() {

                       var chartsss = $('#container').highcharts();

                        setInterval(function() {

                        for(var i=0;i<zone_name.length;i++)
                        {
                            var seriessx = chartsss.series[i];
                            seriessx.addPoint([current_time, Math.random()], false, true);
                            seriessx.addPoint([current_time, Math.random()], false, true);
                        }

                            chartsss.redraw();
                            current_time += 300000;

                        }, 1000);
                    }
                }
            },
            plotOptions: {
                series: {
                    marker: {
                        enabled: false
                    }
                },
                spline: {
                lineWidth: 2,
                states: {
                    hover: {
                        lineWidth:3
                    }
                },
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: false,
                            symbol: 'circle',
                            fillColor: '#ff0000',
                            radius: 4,
                            lineWidth: 1
                        }
                    }
                }
            },
            },
            title: {
                text: 'Daily Zone'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    day: '%e of %b',
                    minute: '%H:%M',
                    hour: '%H:%M'
                },
                tickPosition: 'inside',
                tickInterval: 3600 * 1000,
                minRange:5 * 3600 * 1000,
                maxRange:5 * 3600 * 1000
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%H:%M', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: true
            },
            exporting: {
                enabled: false
            },
            series: (function(){
                var seriesx = [];
                for(var i=0;i<zone_name.length;i++)
                {
                    var datax = [];
                    var time = (new Date()).getTime();
                    now_time=current_time;
                    for(var j = -59 ;j <= 0;j++)
                    {
                        datax.push({
                            x: now_time,
                            y: Math.random()
                        });
                        now_time+=300000;
                    }
                    seriesx.push({
                        name:zone_name[i],
                        data: datax
                    });
                }
                current_time=now_time;
                return seriesx;
            })()
        });
    });

});

JsFiddle链接：http://jsfiddle.net/jedipalm/YLFhD/4/

启动图表时的图片：http://i.stack.imgur.com/rE8m3.jpg

在几秒钟内连续添加点时的图像：http://i.stack.imgur.com/J8GtA.jpg

抱歉我的英语不好。

Answer 1

为什么要添加两次相同的点？ Highcharts不支持具有相同x值的一个系列中的两个点。已移除addPoint()之一并正常工作：http://jsfiddle.net/YLFhD/8/

Answer 2

尝试以下代码：

 for(var j = -120 ;j <= 0;j++)
                    {
                        datax.push({
                            x: now_time,
                            y: Math.random()
                        });
                        now_time+=300000;
                    }

http://jsfiddle.net/YLFhD/6/

移位时，Highchart xaxis数据会减少

2 个答案: