プロジェクトでは、このフィドルに非常に似たものを使用しています: 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 軸の最初のポイントが移動しますが、データのグループ化が使用されているため、列はそこに残りますが、最初の列の値が実際に変化...
奇妙な組み合わせの問題かもしれないので、助けていただければ幸いです。