1

プロジェクトでは、このフィドルに非常に似たものを使用しています: http://jsfiddle.net/Z3vhg/

この動的に更新されるデータ グループ化縦棒グラフのコードは次のとおりです。

$('#container').highcharts('StockChart', {
    chart : {
        type: 'column',
        events : {
            load : function() {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function() {
                    var x = (new Date()).getTime(), // current time
                    y = Math.round(Math.random() * 100);
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    yAxis: {
        offset: 30
    },
    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
        }, {
            count: 5,
            type: 'minute',
            text: '5M'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 2
    },

    title : {
        text : 'Live random data'
    },

    exporting: {
        enabled: false
    },

    series : [{
        name : 'Random data',
        dataGrouping: {
            groupPixelWidth: 60
            },
        data : (function() {
            // generate an array of random data
            var data = [], time = (new Date()).getTime(), i;

            for( i = -999; i <= 0; i++) {
                data.push([
                    time + i * 1000,
                    Math.round(Math.random() * 100)
                ]);
            }
            return data;
        })()
    }]
});

問題は上記のフィドルで確認できます。データが更新されて新しいポイントが追加されると、x 軸の最初のポイントが移動しますが、データのグループ化が使用されているため、列はそこに残りますが、最初の列の値が実際に変化...

奇妙な組み合わせの問題かもしれないので、助けていただければ幸いです。

4

0 に答える 0