0

すべてのシリーズが問題の日付と一致するデータ ポイントを必ずしも持っていない x 軸のタイムラインを使用して積み上げ縦棒グラフを作成しようとしています。データ ポイントごとに複数の列を含む縦棒グラフを作成できますが、実際には積み上げグラフが必要です。チャートのデータは、必要に応じてフォーマットを操作できる JSON です。

var options = {
              chart: {
                  renderTo: 'timeline',
                  zoomType: 'x',
                  type: 'column'
              },
              title: {
                  text: 'Releases'
              },
              yAxis: {
                  title: {
                    text: 'Count'
                  }
              },
              xAxis: {
                  type: 'datetime'
              },
              legend: {
                  enabled: true
              },
              series: []
          };

/* 
Following URL returns json like:

{
    "rows": {
        "dynamicCategory1": {
            "0": {
                "count": "7",
                "unix_date": "1344225600"
            },
            "3": {
                "count": "2",
                "unix_date": "1344312000"
            }
        },
        "dynamicCategory2": {
            "5": {
                "count": "7",
                "unix_date": "1344225600"
            },
            "7": {
                "count": "2",
                "unix_date": "1345003200"
            }
        }
    }
}

*/

$.getJSON("/mydatainjsonformat/", function(data) {

  $.each(data.rows, function(key, val) {
    var series = { data: [] };

    series.name = key;

    $.each(val, function(key2, val2) {
      var x = parseFloat(val2.unix_date * 1000);
      var y = parseFloat(val2.count);

      series.data.push([x, y]);

    });

    options.series.push(series);

  });

  $(function () {
      var chart1;
      $(document).ready(function() {
          chart1 = new Highcharts.Chart(options);
      });
  });
});

理論的には、特定の日付の値を持たない各カテゴリに 0 を含めるようにデータを変更してから、日付をカテゴリにすることができますが、それは正しい方法ですか? それは x 軸の時間を台無しにしませんか? どんな方向でも大歓迎です。

jsfiddle

4

2 に答える 2

2

だから：多くの痛みと苦しみの後、チャートの構成として渡す必要があるこのスタンザがありませんでした：

              plotOptions: {
                column: {
                  stacking: 'normal'
                },

そして、ほとんどのテストでそのスタンザがそこにありましたが、キャメルケースのプロットオプションがなかったので、それを見つけるのに長い時間がかかりました。 キーボードを何度も頭を叩いて泣く

今はうまくいっています。その他の面倒: jsfiddle が AJAX 呼び出し ('/echo/json/') で json を返すようにするには、それに POST する必要があります。なぜ一体 $.getJSON も機能しないのかを判断するのにしばらく時間がかかりました。

于 2012-10-05T15:48:44.797 に答える
0

私が思うのは、あなたはこのようなことを達成したいということです。

X 日付から始まるイベントのようなものがあり、Y 日付まで線を引きたいとします。

したがって、積み上げ棒グラフを使用してこれを使用しようとしているため、Y 軸を横切る線が得られます。

私が正しければ、Highstock を使用することをお勧めします。これは、Highchartsによって開発されたライブラリの 1 つです。

Highstockタイムライン チャートを作成するための優先 API です。

始めるのに役立つサンプルフィドルを作成しました。どうぞ: http://jsfiddle.net/mhardik/YmRUg/

于 2012-10-05T04:19:00.977 に答える