addPoint() を使用して、datetime X 軸を持つ縦棒グラフにデータを動的に追加しようとしています。
これを行うと、多くの場合、列が互いに重なり始めます。視覚的には、列幅が適切に更新されていないように見えます。
問題を示すjsfiddleは次のとおりです。
対応するコードは次のとおりです。
var d_t[ 10, 8, 13 ];
var cur=0;
$(function () {
$('#container').highcharts({
chart: {
type: "column"
},
series: [{
data: [ ]
}],
xAxis: {
type: "datetime"
}
});
// the button action
$('#button').click(function() {
var chart = $('#container').highcharts();
var msec = Date.UTC( 2013, 3, d_t[cur] );
chart.series[0].addPoint( [msec, 10] );
cur++;
cur = ( cur >= 4 ) ? 3 : cur;
});
});
問題が発生する原因となる 4 つの日付をハードコーディングしました。
[ポイントの追加] ボタンを 4 回クリックすると、データが追加され、2 回目の追加では奇妙な列幅 (狭すぎるように見える) が表示され、3 回目と 4 回目の追加では列が重なっていることがわかります。
回避策は、ソートされた順序でチャートに日付を与えることです。すると、グラフが正しく描画されます。それとも、これが必要ですか?
私はおそらく明らかな何かを見逃していますが、私は周りを検索して少しいじりましたが、それを理解することができませんでした. どんな提案でも大歓迎です。