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 に答える