0

addPoint() を使用して、datetime X 軸を持つ縦棒グラフにデータを動的に追加しようとしています。

これを行うと、多くの場合、列が互いに重なり始めます。視覚的には、列幅が適切に更新されていないように見えます。

問題を示すjsfiddleは次のとおりです。

http://jsfiddle.net/AkKqP/6/

対応するコードは次のとおりです。

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 回目の追加では列が重なっていることがわかります。

回避策は、ソートされた順序でチャートに日付を与えることです。すると、グラフが正しく描画されます。それとも、これが必要ですか?

私はおそらく明らかな何かを見逃していますが、私は周りを検索して少しいじりましたが、それを理解することができませんでした. どんな提案でも大歓迎です。

4

1 に答える 1