« グラフ/dojo.charting.Chart | トップページ | Collection »

2007年4月 8日 (日)

グラフ/dojo.widget.Chart

dojo.widget.Chartを使ってグラフを描くこともできる。dojo.widget.Chartは、widgetとして提供されるため、JavaScriptを記述せずにHTMLだけでグラフを描くことができる。dojo.widget.Chartは、dojo.charting.Chartよりも低機能であり、縦向きのグラフ種類のみを提供する。

まず、グラフを描画する部分にdojoTypeとしてchartを指定したdiv要素を作る。

<div dojoType="chart" style="border:1px solid black;width:400px;height:250px;">

グラフの情報は、divの子要素にtableとして記述する。table要素では、軸の情報と、グラフの種類を指定する。

<table padding="12 12 20 30" axisAt="0 xmin" rangeX="0 100" rangeY="-100 100">
  • plotType: グラフの種類
  • axisAt: Y軸/X軸の位置
  • rangeX: X軸の値の範囲
  • rangeY: Y軸の値の範囲

axisAtでは、先にY軸の位置を指定し、半角スペース空けてX軸の位置を指定する。ymax, ymin, xmax, xminのように記述して、Y軸/X軸の最大値、最小値を軸に指定できる。

plotTypeは、line (なめらかな線グラフ), bar (棒グラフ), area (なめらかな面グラフ), scatter (散布図), bubble (バブルチャート)のいずれかを指定できる。thead/tr/thにおいてデータの系列ごとに個別にグラフの種類を指定することもできる。指定しないとデフォルトでlineが指定される。

thead/tr/thで、データ系列ごとにグラフ種類と色を指定できる。最初の列はX軸の値になるため、属性を指定しても無視される。2列目移行では、plotTypeとcolorを属性として指定できる。color属性でグラフの色を指定できる。

<thead>
  <tr>
    <th>X</th>
    <th plotType="area">Series A</th>
    <th plotType="area">Series B</th>
  </tr>
</thead>

tbody/tr/tdにグラフの値を指定する。bubbleのときは、tdのsize属性で点の大きさを指定できる。

<tbody>
<tr><td>0</td><td>-92.45</td><td>63.06</td></tr>
<tr><td>4</td><td>94.23</td><td>-100</td></tr>
<tr><td>8</td><td>-93.12</td><td>-33.54</td></tr>
...
</tbody>

なめらかな折れ線グラフ

<div dojoType="chart" style="border:1px solid black;width:400px;height:250px;background-color:#ededde;">
  <table padding="12 12 20 30" axisAt="ymin xmin" rangeX="0 50" rangeY="0 130">
    <thead>
      <tr>
        <th>X</th>
        <th plotType="line">Series A</th>
        <th plotType="line">Series B</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>0</td><td>110</td><td>20</td></tr>
      <tr><td>10</td><td>24</td><td>4</td></tr>
      <tr><td>15</td><td>63</td><td>32</td></tr>
      <tr><td>25</td><td>5</td><td>13</td></tr>
      <tr><td>40</td><td>98</td><td>7</td></tr>
      <tr><td>45</td><td>54</td><td>18</td></tr>
    </tbody>
  </table>
</div>
                                                                                                   
XSeries ASeries B
0 110 20
10 24 4
15 63 32
25 5 13
40 98 7
45 54 18

動的にグラフの値を変えることもできる。以下のボタンを押すと系列が追加される。

function addSeries(){
  var test = dojo.widget.byId('test');
  var seriesC = new dojo.widget.Chart.DataSeries("SeriesB", "Third", "line", "red");
  seriesC.values=[
{x:0,value:20},
{x:10,value:50},
{x:15,value:32},
{x:25,value:13},
{x:40,value:7},
{x:45,value:18}
  ];
  test.series.push(seriesC);
  test.render();
}

« グラフ/dojo.charting.Chart | トップページ | Collection »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/6014944

この記事へのトラックバック一覧です: グラフ/dojo.widget.Chart:

« グラフ/dojo.charting.Chart | トップページ | Collection »