3. グラフの描画
グラフを表示するには、グラフを表示するためのDOMノード（通常はdivタグ）またはそのIDを指定して、Chart2D（3D表示のplotを使う場合はChart3D）オブジェクトを作成し、plotとseriesを追加した後、Chart2Dオブジェクトのrender()メソッドを呼び出します。ここでは、ある会社の年度別月間売上高をグラフで表示する例を考えましょう。
注）
IE8のVML textには問題が報告されているため、以下のサンプルではIE7互換モードを使用します。
<html> <head> <!-- IE7 互換モードを指定 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<!-- ウィジェット用テーマを読み込み -->
<style type="text/css">
@import "../dojo-release-1.5.0/dojo/resources/dojo.css";
@import "../dojo-release-1.5.0/dijit/themes/claro/claro.css";
</style>
<!-- dojo の読み込み -->
<script type="text/javascript" src="../dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true">
</script>
<script type="text/javascript">
<!-- Chart2D の読み込み -->
dojo.require("dojox.charting.Chart2D");
var drawChart = function(){
// 2008年度月間売上高
var revenues2008 = [13000, 13000, 13000, 15000, 16000, 17000, 27000, 30000, 38000, 38000, 25000, 23000];
// 2009年度月間売上高
var revenues2009 = [27000, 30000, 30000, 35000, 40000, 45000, 46000, 42000, 37000, 35000, 38000, 40000];
var myChart = new dojox.charting.Chart2D("myChart");
// デフォルトの描画コンポーネントとして折れ線グラフを指定
myChart.addPlot("default", {type: "Lines"});
// デフォルトの描画コンポーネントに2008年度、2009年度の4月～3月の月間売上高を追加
myChart.addSeries("2008年度売上高", revenues2008);
myChart.addSeries("2009年度売上高", revenues2009);
// グラフを描画
myChart.render();
}
// dojo のパース完了後に drawChart 関数を呼び出す
dojo.addOnLoad(drawChart);
</script>
</head>
<body class="claro">
<!-- グラフを表示するための DOM ノードには高さと幅を指定 -->
<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>
実行結果:
上記のコードにより、2つのデータ系列の折れ線グラフが表示されましたが、これではチャートで表示している値が分かりませんので、axisを追加してx軸、y軸の情報を表示しましょう。
// x 軸のラベル
var 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月"}
];
var myChart = new dojox.charting.Chart2D("myChart");
myChart.addPlot("default", {type: "Lines"});
myChart.addSeries("2008年度売上高", revenues2008);
myChart.addSeries("2009年度売上高", revenues2009);
// x 軸と y 軸を追加
myChart.addAxis("x", {majorTickStep: 1, natural: true, labels: labels});
myChart.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});
myChart.render();
axisには、上の例のように目盛りやラベルの表示を指定するプロパティを指定することができます。
実行結果:
すでにいくつか登場していますが、plot、axis、seriesにはさまざまなプロパティを指定できます。これらのプロパティはkwArgs（第1節参照）により指定します。いずれのプロパティも省略可能ですが、これらを指定することにより多様なグラフを描画可能です。ここでは比較的よく使用されるものを紹介します。
plotのプロパティ
| プロパティ名 | 型 | 説明 | デフォルト値 |
| type | String | グラフの種類 | "Lines" |
| tension | Number|String （※数値、もしくはS、X、xのいずれか） |
曲率 （※折れ線グラフなど一部の種類のみに有効） |
0 |
| hAxis/vAxis | String | 使用する水平/垂直軸 | "x"/"y" |
axisのプロパティ
| プロパティ名 | 型 | 説明 | デフォルト値 |
| vertical | Boolean | 垂直/水平 | false |
| fixUpper/fixLower | String （※major、minor、micro、noneのいずれか） |
表示区間の最大/最小値を配置する目盛りの粒度 | "none" （※データ系列の最大/最小値をaxisの最大/最小値とする） |
| natural | Boolean | 自然数以外の目盛りを許さない/許す | false |
| includeZero | Boolean | ゼロを必ず含める/含めない | false |
| labels | Object[] | 主目盛り用ラベル | null |
seriesのプロパティ
| プロパティ名 | 型 | 説明 | デフォルト値 |
| stroke | Object | 線の色や幅 （※折れ線グラフなど一部の種類のみに有効） |
null （※themeで割り当てられたものを使用） |
| fill | String | 塗りつぶしの色 （※棒グラフなど一部の種類のみに有効） |
"" （※themeで割り当てられたものを使用） |
| plot | String | 対象となるplot | "default" |
