5. 複合グラフの描画
複数の種類のplotを組み合わせることで、複数の種類のグラフを同時に表示することもできます。以下の例では、"default"の折れ線グラフ用plotに加えて、"columns"という名前で棒グラフ用plotを追加し、plotプロパティに"columns"を指定したseriesを追加することで、折れ線グラフと棒グラフを表示しています。さらに、グラフの右側に"right"という名前でaxisを追加し、"columns" plotのvAxisプロパティに"right"を指定して、"columns" plotで描画するグラフに対応する目盛りを表示しています。また、背景用のGrid plotも追加しています。ここでは、ある会社の年度別月間売上高を折れ線グラフ、新規契約数を棒グラフで表示する例を考えましょう。
// 2008年度月別新規契約数
var contracts2008 = [11, 12, 11, 20, 22, 20, 32, 30, 35, 30, 10, 5];
// 2009年度月別新規契約数
var contracts2009 = [20, 17, 21, 31, 41, 41, 31, 28, 21, 20, 32, 33];
var myChart = new dojox.charting.Chart2D("myChart");
myChart.addPlot("default", {type: "Lines"});
// 棒グラフ用 plot 追加
myChart.addPlot("columns", {type: "ClusteredColumns", vAxis: "right", gap: 5});
// 背景追加
myChart.addPlot("grid", {type: "Grid"});
myChart.addSeries("2008年度売上高", revenues2008);
myChart.addSeries("2009年度売上高", revenues2009);
myChart.addSeries("2008年度新規契約数", contracts2008, {plot: "columns"});
myChart.addSeries("2009年度新規契約数", contracts2009, {plot: "columns"});
myChart.addAxis("x", {majorTickStep: 1, natural: true, labels: labels});
// 左側の縦軸を追加
myChart.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});
// 右側の縦軸を追加
myChart.addAxis("right", {vertical: true, leftBottom: false, fixUpper: "major", includeZero: true});
myChart.setTheme(dojox.charting.themes.PrimaryColors);
myChart.render();
6. ウィジェット
Chart2Dオブジェクトを使って、グラフを描画する代わりに、Chart2Dウィジェットを利用して、HTMLのマークアップでグラフをページに埋め込むこともできます。Chart2Dウィジェットを利用するには、あらかじめdojox.charting.widget.Chart2Dをdojo.require()で読み込んでおく必要があります。
dojo.require("dojox.charting.widget.Chart2D");
HTMLを以下のように変更します。
<body class="claro">
<div dojoType="dojox.charting.widget.Chart2D" id="myChart" style="width: 400px; height: 200px;">
<div class="plot" name="default" type="Lines" tension="3"></div>
<div class="series" name="2008年度売上高" stroke="{color: 'red', width: 3}"
data="13000, 13000, 13000, 15000, 16000, 17000, 27000, 30000, 38000, 38000, 25000, 23000"></div>
<div class="series" name="2009年度売上高" stroke="{color: 'blue', width: 3}"
data="27000, 30000, 30000, 35000, 40000, 45000, 46000, 42000, 37000, 35000, 38000, 40000"></div>
<div class="axis" name="x" majorTickStep="1" natural="true"
labels="[{value: 1, text: '4月'}, {value: 2, text: '5月'}, {value: 3, text: '6月'},
{value: 4, text: '7月'}, {value: 5, text: '8月'}, {value: 6, text: '9月'},
{value: 7, text: '10月'}, {value: 8, text: '11月'}, {value: 9, text: '12月'},
{value: 10, text: '1月'}, {value: 11, text: '2月'}, {value: 12, text: '3月'}]"></div>
<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true"></div>
</div>
</body>
表示されたグラフに対し、Legendウィジェットを配置すると、グラフの凡例を表示することができます。
Legendウィジェットを使用するには、dojox.charting.widget.Legendをdojo.require()で読み込んでおく必要があります。
chartプロパティには、対象のChart2Dのインスタンスを指定します。またhorizontalプロパティで凡例の配置方法、swatchSizeで凡例の見本のサイズを指定できます。
var myLegend = new dojox.charting.widget.Legend({
chart: myChart,
horizontal: true,
swatchSize: 15
}, "myLegend");
また、凡例を表示するためのDOMノードを用意します。
<div id="myLegend"></div>
4節の最初のグラフに対しては、次のように表示されます。
7. まとめ
このようにDojo Toolkitのチャート・コンポーネントにより、さまざまな種類のグラフを細かなオプションを指定して描画することができます。これによって、自分好みのヴィジュアルなグラフを描画することができるでしょう。
また、このチャート・コンポーネントは、グラフの動的なデータの更新やイベント処理もサポートしています。これらを使えば、サーバーからJSON形式でデータを受け取って定期的にグラフを更新したり、ユーザーの入力に応じて描画内容を変更したりといった、よりインタラクティブなビジネス・アプリケーションUIを実装することができます。今回は基本的な描画機能のみに絞ってご紹介しましたが、次回は、このようなより進んだ機能について解説します。
