2

我正在尝试以渐进的方式向图表添加新点。添加新点并设置新的最小值/最大值后,工具提示标签显示不正确。

小提琴:http: //jsfiddle.net/aAFLX/

$(function() {
    Highcharts.setOptions({
        global : {
            useUTC : false
        },
        scrollbar:{
            enabled: true
        },
        lang: {
            rangeSelectorZoom: ' '
        }
    });

    var dataPoints = [[1293820200000, 45], [1293733800000, 25], [1293647400000, 65]]
    var counter = 0;

    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        rangeSelector: {
           enabled: false
        },
        navigator: {
          enabled: false
        },
        scrollbar : {
            enabled : false
        },        
        yAxis: {
            min: 0,
            max: null
        },
        xAxis: {
            type: 'datetime',
            linecolor: '#bbccdd',
            gridLineColor:'#bbccdd',
            tickInterval: 86400000,
            min: 1293820200000,
            max: 1294079400000
        },
        series: [{
            name: 'Count',
            data : [[1293906600000, 56]],
            type : 'column',
        }]
    });

    $('#button').click(function() {
        if(counter == dataPoints.length) {
            return;
        }
        var point = dataPoints[counter++];
        var d = new Date(point[0]);
        var min = d.setDate(d.getDate() - 1);

        chart.xAxis[0].setExtremes(min,null);
        chart.series[0].addPoint(point);
    });
});

知道有什么问题吗?我是否遗漏了某些内容或错误地使用了 API?

4

1 回答 1

1

Highstock 不会对输入数据进行自动排序,所以在给 Highstock 时必须进行排序。我认为这是造成问题的原因。

所以在添加新点时,添加的点必须比上一个点在时间上更晚。

我通过对数据点进行排序修改了你的jsfiddle

dataPoints.sort(function (a, b) {
    return a[0] - b[0];
});

并将第一个点移回时间。(还删除了对 setExtremes 的调用以保持所有点都在视图中,但这与问题无关)。

于 2013-02-12T12:07:18.477 回答