« Date/日時 | トップページ | グラフ/dojo.widget.Chart »

2007年4月 6日 (金)

グラフ/dojo.charting.Chart

Dojoでは、グラフを描画する方法として、dojo.charting.Chartとdojo.widget.Chartの2つが提供されている。 dojo.charting.ChartはJavaScriptでグラフの描画方法を指定するのに対して、dojo.widget.Chartは主にHTMLのtable要素として指定する。

dojo.charting.Chartで指定する方法を説明する。

まず、以下の2つをrequireする。

dojo.require("dojo.collections.Store");
dojo.require("dojo.charting.Chart");

次にJSON形式のグラフデータをdojo.collections.Storeに読み込む。

var json = [
   { x: 0, y: 110, y2: 20},
   { x: 10, y: 24, y2: 4},
   { x: 15, y:63, y2: 32},
   { x: 25, y: 5, y2: 13},
   { x: 40, y: 98, y2: 7},
   { x: 45, y: 54, y2: 18}
];
var store = new dojo.collections.Store();
store.setData(json);

読み込んだデータを使って、データ系列を指定する。以下の例では、X軸とY軸の値のみを指定しているが、バブルチャートのときは、点の大きさを示すsizeも指定する。

var s1 = new dojo.charting.Series({
  dataSource:store,
  bindings:{ x:"x", y:"y"},
  label:"Line"
});
var s2 = new dojo.charting.Series({
  dataSource:store,
  bindings:{ x:"x", y:"y2"},
  label:"Line 2"
});

範囲やラベルなど、X軸/Y軸の情報を指定する。originには"max","min"または数値を指定でき、軸の位置を指定する。

//X軸の情報
var xA = new dojo.charting.Axis();
xA.range={upper:50, lower:0};
xA.origin="max";
xA.showTicks = true; //ラベルを指定した値の強調点のライン上に表示する
xA.label = "X-Axis";
xA.labels = [0, 20, 40];

//Y軸の情報
var yA = new dojo.charting.Axis();
yA.range={upper:130,lower:0};
yA.showLines = true; //ラベルを指定した値の点線を表示する
yA.showTicks = true; //ラベルを指定した値の強調点のライン上に表示する
yA.labels = [ {label:"min", value:0 }, { label:"35",value:35 }, { label:"max", value:120 } ];
yA.label = "Y-Axis"

グラフの種類を指定する。dojo.charting.Plotters.Lineと指定しているところで、グラフの種類を指定できる。

var p = new dojo.charting.Plot(xA, yA);
p.addSeries({ data:s1, plotter: dojo.charting.Plotters.Line });
p.addSeries({ data:s2, plotter: dojo.charting.Plotters.Line });
  • Line (折れ線グラフ)
  • CurvedLine (なめらかな線グラフ)
  • DataBar (棒グラフ)
  • Area (面グラフ)
  • CurvedArea (なめらかな面グラフ)
  • Scatter (散布図)
  • Bubble (バブルチャート)  [データとしてx, y, sizeを指定]

以下の積み重ねグラフでは、グルーピングが必要となる。

  • StackedArea (積み重ね面グラフ)
  • StackedCurvedArea (なめらかな積み重ね面グラフ)

グルーピングを指定するには、dojo.charting.PlotのrenderTypeとして、dojo.charting.RenderPlotSeries.Groupedを指定する。

var p = new dojo.charting.Plot(xA, yA);
p.renderType = dojo.charting.RenderPlotSeries.Grouped;
p.addSeries({ data:s1, plotter: dojo.charting.Plotters.Line });
p.addSeries({ data:s2, plotter: dojo.charting.Plotters.Line });

その他のグラフとして、以下を指定できる。

  • HorizontalBar [データとしてyを指定]
  • Gantt (ガントチャート) [データとしてhigh, lowを指定]
  • HighLow [データとしてx, high, lowを指定]
  • HighLowClose [データとしてx, high, low, closeを指定]
  • HighLowOpenClose [データとしてx, high, low, open, closeを指定]

グラフの描画領域を指定する。同じ描画領域に複数のグラフを指定することもできる。

var pa = new dojo.charting.PlotArea();
pa.size={width:400,height:250};
pa.padding={top:20, right:20, bottom:30, left:50 };
pa.plots.push(p);

系列に色を割り当てる。

s1.color = pa.nextColor();
s2.color = pa.nextColor();

グラフを描画する。

var chart = new dojo.charting.Chart(null, "Title", "Description");
chart.addPlotArea({ x:50,y:50, plotArea:pa });
chart.node = dojo.byId("chart");
chart.render();

グラフを描画した後も、dojo.collections.Storeの値を変更した後に、dojo.charting.Chartのrender()メソッドを呼ぶことで、グラフの値を変更できる。dojo.collections.Storeの値を変更するには、setData, addData, addDataRange, addDataByIndex, addDataRangeByIndex, removeData, removeDataRange, removeDataByKey, removeDataByIndexなどのメソッドが使える。

function changedata(){
  b0.removeDataByIndex(0);
  chart.render();
}

折れ線グラフ

なめらかな線グラフ

棒グラフ

バブルチャート

積み重ね面グラフ

ガントチャート

HighLowグラフ

HighLowOpenCloseグラフ

« Date/日時 | トップページ | グラフ/dojo.widget.Chart »

コメント

コメントを書く

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

トラックバック

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

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

« Date/日時 | トップページ | グラフ/dojo.widget.Chart »