2010-08-09

ExtJS: 縦積み上げ棒グラフ(StackedColumnChart)とスタイルのサンプル

最近ExtJSでグラフを生成できることを知ったので、いろいろテストしながらExtJSで縦積み上げ棒グラフのサンプルをつくってみました。日本語の解説があまりないのでつまりやすいですが、機能が豊富そうだし表示がきれい。

ExtJS: 縦積み上げ棒グラフ(StackedColumnChart)とスタイルのサンプル - jsdo.it - share JavaScript, HTML5 and CSS

(今回はjsdo.itにコードがあります。jsdo.itはExtJS等のたくさんのライブラリをすぐ読み込めるのが良いですね。実行結果はリンク先で見ることが出来ます。…何でこの場で見れないんだろう? 追記: 一日置いたら(?)実行結果がこの場で見れるようになっていました。「Play」を押してみてください)

このサンプルをつくるまでにつまって調べたところをメモしておきます。

1. 棒グラフを縦向きにする方法がわからない
縦向きの棒グラフはExt.chart.ColumnChartです。積み上げの場合はExt.chart.StackedColumnChartです。

2. 軸ラベルを設定したい
xAxis, yAxisに指定する軸オブジェクトにtitleを指定します。次の例ではX軸に「X軸」という軸ラベルを設定します。

new Ext.chart.StackedColumnChart({
  // (...中略...)
  xAxis: new Ext.chart.CategoryAxis({title: "X軸"})
  // (...後略...)
});

3. 凡例を表示したい
extraStyle.legend.displayで表示位置を指定します。次の例では凡例を下部に表示するようにします。

new Ext.chart.StackedColumnChart({
  // (...中略...)
  // ("bottom"は凡例を下部に表示します)
  extraStyle: { legend: { display: "buttom" } }
  // (...後略...)
});

4. 積み上げ棒グラフを表示したい
StackedBarChart (横) か StackedColumnChart (縦) にしてseriesを設定、積み上げる方の軸オブジェクトのstackingEnabledをtrueにします。次の例ではY軸を「積み上げ」にします。

new Ext.chart.StackedColumnChart({
  // (...中略...)
  yAxis: new NumericAxis({
    title: "Y軸",
    stackingEnabled: true
  }),
  series: [
    { yField: "a", displayName: "A" },
    { yField: "b", displayName: "B" }
  ]
  // (...後略...)
});

5. フォントの大きさを変えたい
グラフはextraStyle.font.size、凡例はextraStyle.legend.font、ツールチップはextraStyle.dataTip.font.sizeに値を設定します。次の例ではグラフのフォントサイズを14に、凡例のフォントサイズを13に、ツールチップのフォントサイズを12に設定します。

new Ext.chart.StackedColumnChart({
  // (...中略...)
  extraStyle: {
    font: { size: 14 },
    legend: {
      font: { size: 13 }
    },
    dataTip: {
      font: { size: 12 }
    }
  }
  // (...後略...)
});

軸ラベルのフォントの大きさの設定方法はまだわかりません…

6. 凡例を表示するとグラフのアニメーションができなくなる?
今調査中です…