Dojo を使って動的なグラフや図を作成する

dojox.charting モジュールを使ってデータを視覚化する

Web 2.0 の世界では Web ページがアプリケーションに似たものになりつつあり、Web 開発ライブラリー (Dojo や jQuery など) が次第に重要な役割を果たすようになっています。この記事では、Dojo ライブラリーの dojox.charting モジュールを使ってデータを視覚化する方法を学びます。dojox.charting を使えば、見栄えが良く機能的かつ動的なグラフや図を短時間で容易に Web ページに追加することができます。そのために必要なものは、基本的な JavaScript のスキルと Dojo のみです。

Xiang Zhou, Software Engineer, IBM

Zhou Xiang photoZhou Xiang は上海にある IBM China Development Lab の Federated Integration Test チームのソフトウェア技術者です。彼はこれまで Lotus Mashups と UT/ClickTrack の業務に従事していました。現在は、dijit Claro テーマの開発、dojox グラフ機能の新機能など、Dojo ライブラリーの開発を行っています。



2010年 11月 02日

はじめに

Web 2.0 が一般的になるにつれ、Dojo や jQuery などの Web 開発用ライブラリーが次第に重要な役割を果たすようになっています。Web ページはアプリケーションに似たものになりつつあります。Dojo のグラフ作成モジュールを使用すると、見栄えが良く機能的かつ動的なグラフや図を短時間で容易に Web ページに追加することができます。

この記事では、dojox.charting モジュールの多様な機能の使い方を学びます。例やコード・サンプルを示しながら、新しい Dojo Toolkit 1.5 のグラフ作成機能を見ていきます。


グラフの概要

このセクションでは、Dojo の視覚化ライブラリーで利用可能な主なグラフのタイプの概要を説明します。

線グラフ

基本的な線グラフでは、データ・ポイントでのプロットと、データ・ポイントを結ぶ線の描画をすることができます。線グラフには、以下のようにいくつかのタイプがあります。

  • default: 汎用の線グラフであり、データ・ポイントでのプロットと、データ・ポイントを結ぶ線の描画、そして描画された線の下の領域を塗りつぶすことができます。チャートにグラフを追加する際に Plot タイプ (グラフの種類) を指定しない場合には、このタイプのグラフが使われます。
  • Lines: データ・ポイントを結ぶ線が描画される基本的な線グラフです。グラフの名前には「default」を指定します。
  • Areas: データ・ポイントを結ぶ線の描画と、線の下にある領域の塗りつぶしが行われます。グラフの名前には「default」を指定します。
  • Markers: データ・ポイントでのプロットと、データ・ポイントを結ぶ線の描画が行われます。グラフの名前には「default」を指定します。
  • MarkersOnly: 線は描画されず、データ・ポイントでのプロットのみが行われます。グラフの名前には「default」を指定します。

図 1 は、データ・ポイントでのプロットと、データ・ポイントを結ぶ線の描画を行った線グラフの例です。

図 1. データ・ポイントでのプロットと、データ・ポイントを結ぶ線の描画を行った線グラフ (Markers)
線グラフの中に、データ・ポイントでのプロット、データ・ポイントを結ぶ線、2D データ、カスタムの軸、青のテーマが表示されています。

積み上げ線グラフ

積み上げ線グラフには、以下の種類があります。

  • Stacked: 前のデータ系列の上に積み上げてデータ系列を描画します。「default」を拡張したものです。
  • StackedLines: 積み上げたデータ系列を線で描画します。グラフの名前には「Stacked」を指定します。
  • StackedAreas: 積み上げたデータ系列を線で描画し、線の下の領域を塗りつぶします。グラフの名前には「Stacked」を指定します。

例えば、図 2 は StackedAreas のグラフ (積み上げ面グラフ) であり、積み上げられたデータ系列が線で描画され、線の下の領域は塗りつぶされています。

図 2. 積み上げ面グラフ (StackedAreas)
積み上げ面グラフの中に、積み上げられた領域、軸 (そして主な目盛) が表示されており、線の太さと塗りつぶしはカスタム設定です。

横棒グラフ

昔ながらの横棒グラフとして、以下があります。

  • Bars: 水平方向の棒グラフ (横棒グラフ)。
  • ClusteredBars: 複数のデータ系列を束ねて表示する横棒グラフ。グラフの名前には「Bars」を指定します。
  • StackedBars: 複数のデータ系列を積み上げて表示する横棒グラフ。グラフの名前には「Bars」を指定します。

縦棒グラフ

縦棒グラフには以下のようなタイプがあります。

  • Columns: 垂直方向の棒グラフ (縦棒グラフ)。
  • ClusteredColumns: 複数のデータ系列を束ねて表示する縦棒グラフ。グラフの名前には「Columns」を指定します。
  • StackedColumns: 複数のデータ系列を積み上げて表示する縦棒グラフ。グラフの名前には「Columns」を指定します。

例えば、ClusteredColumns は複数のデータ系列を束ねて縦棒で表示します (図 3)。これは複雑なタイプの縦棒グラフです。

図 3. 複数のデータ系列を束ねた縦棒グラフ (ClusteredColumns)
複数のデータ系列を束ねた縦棒グラフが示されています。正の値の縦棒と負の値の縦棒が束ねて表示されており、軸、グリッド線も示されています。

StackedColumns グラフも、複雑なタイプの縦棒グラフです。このグラフではデータ系列を積み上げ、縦棒として表示します。

図 4. 複数のデータ系列を積み上げた縦棒グラフ (StackedColumns)
複数のデータ系列を積み上げた縦棒グラフが示されています。異なる色で積み上げられた複数の縦棒が表示されています。

その他

その他、以下のようなグラフがあります。

  • Pie: 円グラフ。おそらく最も一般的なタイプのグラフの 1 つです。
  • Scattger: 散布図。MarkersOnly と似ていますが、グラデーションのついたフィールドを使ってグラフを表現することができます。
  • Grid: グリッド線。グラフにグリッド・レイヤーを追加します。

円グラフ (扇状に分割された円形のグラフ) は比率を表現します。

図 5. 円グラフ (Pie)
カスタムの色を使った円グラフが表示されており、内部のカスタム・ラベルとカスタムのツールチップも表示されています。

地図グラフ

地図グラフでは、地理データに基づいて地図を描画することができます。地図グラフについての詳細は、この記事の終わり近くで説明します。

図 6. 地図グラフ
米国の地図グラフが、データ系列、データ、凡例と共に表示されています。

Dojo のグラフ作成機能を使う

このセクションでは、Dojo のグラフ作成機能の一部を概説します。

リスト 1 は、Dojo の視覚化ライブラリーを使ってグラフを作成するための基本を示しています。メソッドとして、addAxisaddPlotaddSeriesrender の 4 つがあります。

リスト 1. Dojo の視覚化ライブラリーを使ってグラフを作成するための基本
<div id="test1" style="width: 200px; height: 200px;"></div>
                
makeObjects = function(){
var chart1 = new dojox.charting.Chart2D("test1");
chart1.addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true});
chart1.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major",
 natural: true});
chart1.addPlot("default", {type: "Bars"});
chart1.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, 
fill: "lightpink"});
chart1.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, 
fill: "lightblue"});
chart1.render();
};
dojo.addOnLoad(makeObjects);

どのようなグラフの場合も、グラフを構成するためには以下の 3 項目を指定する必要があります。

Plot
データの視覚化方法を指定します。例えば Columns (縦棒グラフ)、Bars (横棒グラフ)、Pie (円グラフ) など。
Axis
視覚化されるデータの次元に関する指定を行います。これは X 軸や Y 軸に関する定義であり、軸に付けるラベルのテキストや軸の向きなどを指定します。
Series
グラフによって視覚化されるデータ系列を記述します。

Plot (グラフの種類) を構成する

addPlot() 関数は、名前、引数の配列、という 2 つの引数を取ります。名前は、グラフ上に Plot タイプ (グラフの種類) が複数ある場合のための ID です。引数の配列には、使用される Plot タイプ (グラフの種類) に応じたオプションが含まれます。

addPlot("default", {type: "Areas", tension:"X"})

Axis (軸) を指定する

グラフの軸を指定するためには addAxis() メソッドを使います。グラフの addAxis() を呼び出す場合、軸を定義するためのオプションがいくつかあり、addPlot() の場合と同様、名前、オプションの配列という 2 つの引数を指定することができます。addPlot() を呼び出す際に軸の名前をカスタムで指定する場合を除き、軸の名前のデフォルトの値として xy を使います。

軸が 1 つしかないグラフや軸のないグラフを作成する場合には、軸を定義する必要はありません。また、Plot (グラフの種類) をもう 1 つ追加し、その Plot に軸を追加することで、3 つ以上の軸を持つグラフを作成することもできます。この手法を使用すると、最大 4 つの軸 (垂直方向の軸が 2 つと水平方向の軸が 2 つ) を表示することができます。その場合には 2 つから 4 つの Plot を使って addAxis()leftBottom パラメーターを設定します。

また、1 つの軸を複数の Plot で共有することもできます。例えば、2 つの Plot で横軸は同じものを使用し、縦軸だけ異なるものを使用することもできます。リスト 2 には、これを実現するために必要なすべての addPlot() オプションなどが示されています。

リスト 2. addPlot() のオプション
chart.addAxis("x2", {fixLower: "minor", natural: true, leftBottom: false, 
    stroke: "grey", majorTick: {stroke: "black", length: 4}, majorLabels: true});
chart.addAxis("y2", {vertical: true, min: 0, max: 20, leftBottom: false, 
    stroke: "grey", majorTick: {stroke: "black", length: 4}, 
    minorTick: {stroke: "gray", length: 2}});
chart.addPlot("plot2", {type: "Areas", hAxis: "x2", vAxis: "y2", 
    animate: {duration: 1800}});

目盛を表示/非表示にする

目盛を詳細に表示することも、粗く表示することも、あるいは目盛を非表示にすることもできます。同様に目盛ラベルを細かく付けることも、大まかに付けることも、あるいは目盛ラベルを付けないこともできます。例えば、majorTick が false ではない場合、グラフには軸に沿って目盛が表示されます。

目盛ラベル用のパラメーターも目盛用のパラメーターと似ています。majorTick が false の場合、既に目盛ラベル用にテキストを設定してある場合であっても、その目盛ラベルはグラフに表示されません。上記のリスト 2 を参照してください。

軸の目盛にカスタムの値を使う

Dojo のグラフでは、どの軸にもカスタムの目盛ラベルを設定することができます。テキストが適切に表示されるように、div の中で十分なスペースを確保する必要があります。リスト 3 は、縦棒グラフの目盛ラベルとして月の名前を使用する場合を示しています。

リスト 3. 縦棒グラフで目盛ラベルとして月の名前を使用する
chart4.addAxis("y", {
		vertical: true, 
		fixLower: "none", 
		fixUpper: "none", 
		natural: true,
		majorTick: { length: 3 },
		labels: [
			{value: 0, text: ""},
			{value: 1, text: "January"}, 
			{value: 2, text: "February"},
			{value: 3, text: "March"}, 
			{value: 4, text: "April"},
			{value: 5, text: "May"} 
		]
	});

データ系列を構成する

addSeries() を使用すると、グラフに表示されるデータ系列を定義することができます。addSeries() は、名前、データの配列、オプションの配列、という 3 つの引数を取ります。また、データを更新する必要がある場合には、名前とデータの配列を引数にとる updateSeries() を呼び出すこともできます。

addSeries() を呼び出す場合のオプションは以下のとおりです。

  • stroke により、横棒グラフと縦棒グラフの線または縁の色と幅を設定することができます。
  • fill により、Areas タイプの線グラフでは線の下の塗りつぶし領域の色を設定することができ、また横棒グラフと縦棒グラフでは棒を塗りつぶす色を設定することができます。

SVG または dojox.gfx を理解している人であれば、strokefill を理解することができるはずです。

addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, 
 fill: "lightpink"})

データの配列は、単なるデータの配列の場合があります。すべての Plot タイプ (グラフの種類) で 1 次元の配列を受け付けますが、グラフの形式によっては他にもフォーマットの選択肢があります。線グラフ形式に対する 1 次元の配列の場合、X 軸は整数 (1、2、3 など) であり、データが Y 軸です。棒グラフ形式の場合、データは棒の長さであり、縦棒形式を選ぶか横棒形式を選ぶかによって棒の向きが決まります。円グラフの場合、データ配列の合計が円全体です。円グラフ以外のすべての Plot タイプ (グラフの種類) で複数のデータ系列を持つことができます。

リスト 4. addSeries() の実際
addSeries("Series A", [
	{ x: 0.5, y: 5 },
	{ x: 1.5, y: 1.5 },
	{ x: 2, y: 9 },
	{ x: 5, y: 0.3 }
]).
addSeries("Series B", [
	{ x: 0.3, y: 8 },
	{ x: 4, y: 6 },
	{ x: 5.5, y: 2 }
])

円グラフの場合、追加の情報を指定することができます (例えば、各扇形に対するテキスト・ラベル、扇形の色、addPlot() の呼び出しで指定されたフォント色を置き換えるフォント色など)。リスト 5 はその一例です。

リスト 5. 円グラフに対する addSeries()
chart6.addSeries("Series A", [
		{y: 4, text: "Red", color: "red"},
		{y: 2, text: "Green", color: "green"},
		{y: 1, text: "Blue", color: "blue"},
		{y: 1, text: "Other", color: "white", fontColor: "black"}
	]);

グラフのイベント

Dojo のグラフ作成機能では、独自の方法でイベントを追加することができます。connectToPlot はイベントを処理するための非常に便利なメソッドです。グラフのイベントを利用すると、ユーザーのアクションに応じて、さまざまなグラフ機能 (例えばデータ・ポイントでのプロットなど) に動作を追加することができます。サポートされているイベントは以下のとおりです。

  • onclick
  • onmouseover
  • onmouseout

個々のグラフにイベント・ハンドラーを追加することができます (リスト 6)。

リスト 6. 個々のグラフにイベント・ハンドラーを追加する
      chart1.connectToPlot("default", function(args){
		switch(args.type){
			case "onclick":
				if(args.index == 1){
					var shape = args.shape;
					//TODO...
				}
				break;
			case "onmouseover":
				//TODO...
				break;
			case "onmouseout":
				//TODO...
				break;
			default:
				//TODO...
				break;
		}
	});

ズーム

Dojo のグラフ作成機能にはズームを制御する手段が用意されており、グラフの非常に詳細な部分に至るまで拡大することができます。また、スクロールしたり、パンしたりすることもできます (マウスを使って 2 次元でのグラフの移動が可能です)。パンを実行すると、ブラウザーに負荷がかかることに注意してください。ただし、新しい世代のブラウザー (Firefox 3、Safari 3、Opera 9.5) であれば問題ないはずです。また、現在の Dojo のグラフ作成機能ではズーム・イン/ズーム・アウトにアニメーション効果を持たせられるようになったため、ユーザー・エクスペリエンスを向上させることができます。

chart.zoomIn("x", [50, 80]);  
//zoom into [50, 80] which is part of total zone [0, 100] on x axis

アクションとアニメーションのエフェクト

アクションは自己完結のオブジェクトであり、ユーザーがグラフを操作する際に、イベントを使用して特定のエフェクトを実装します。一般にアクションを設計するのは、ユーザーの注意を喚起し、どのグラフ構成要素が選択されたかを示す場合、あるいは追加の情報を表示する場合です。

デフォルトのライブラリーには、以下の 5 つのアクション (Highlight、Magnify、MoveSlice、Shake、Tooltip) が含まれています。どのアクションも Dojo のアニメーション・サポートを利用しています。

Highlight
グラフの構成要素にマウスを重ねると、その要素が強調表示されます (塗りつぶしの色が変更されます)。対象となる要素には、データ・プロット、縦棒、横棒、円、円グラフの扇形があります。
var anim1c = new dc.action2d.Highlight(chart1, "default", {
		duration: 2000,
		easing: dojo.fx.easing.sineOut,
		highlight: "blue"
	});
Magnify
グラフの構成要素にマウスを重ねると、その要素が拡大されます。このエフェクトは、必ず Highlight エフェクトと一緒に使われます。対象となる要素には、データ・プロットと円があります。
var anim9a = new dc.action2d.Magnify(chart1, "default", {
scale: 1.5
        });
MoveSlice
円グラフから扇形の領域を少しスライドします。実際には、扇形の要素にマウスを重ねると、扇形の位置が x 方向と y 方向に少しスライドします。
 var anim10a = new dc.action2d.MoveSlice(chart10, "default", {
		    scale: 2,
		    shift: 5
		});
Shake
グラフの構成要素にマウスを重ねると、その要素が揺らされます。対象となる要素には、データ・プロット、縦棒、横棒、円、円グラフの扇形があります。
var anim6b = new dc.action2d.Shake(chart6, "default"{
		    shiftX: 5,
		    shiftY: 10
		});
Tooltip
ツールチップを表示しますが、実際には位置を少しカスタマイズした dijit.Tooltip が実行されます。グラフの構成要素にマウスを重ねると、必ずその中央にツールチップが表示されます。対象となる要素には、データ・プロット、縦棒、横棒、円、円グラフの扇形があります。
var anim1b = new dc.action2d.Tooltip(chart1, "default", {text: function(args){
return args.index < 2 ? "good" : "bad";
 }});

ツールチップの内容は、機能に合わせてカスタマイズすることができます。

チャート・ウィジェット

Dojo のグラフ作成機能を使用する最も簡単な方法は Chart2D ウィジェットを使用する方法です。Chart2D ウィジェットは、Dojo の標準的なウィジェットと同じ方法で使用することができます。Dojo のチャート・ウィジェットをプログラムで作成するのではなく、dojoType = ‘dojox.charting.widget.chart2D’ を使ってチャート・ウィジェットを HTML ソースに埋め込みます。リスト 7 は Dojo の Chart2D ウィジェットのテストから引用したものです。

リスト 7. Dojo の Chart2D ウィジェットのテスト
<div dojoType="dojox.charting.widget.Chart2D" id="chart1" 
    style="width: 300px; height: 300px;">
        <div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div>
        <div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true" 
        font="italic normal normal 8pt Tahoma"></div>
        <div class="plot" name="default" type="Areas"></div>
        <div class="plot" name="grid" type="Grid"></div>
        <div class="series" name="Run A" data="1, 2, 0.5, 1.5, 1, 2.8, 0.4"></div>
        <div class="series" name="Run B" array="seriesB"
        legend="&lt;em&gt;Custom&lt;/em&gt; legend"></div>
        <div class="series" name="Run C" store="tableStore" valueFn="Number(x)"></div>
</div>

凡例ウィジェット

凡例ウィジェットは Dojo のグラフの凡例を描画するための独立したウィジェットです。グラフに凡例ウィジェットを追加するためには、dojox.charting.widget.Legend を使用します。凡例ウィジェットは、自動的にグラフのデータ・プロットの形状や色に従います。デフォルトで、凡例ウィジェットはデータ系列の legend パラメーターを使用します。legend パラメーターが指定されていない場合には、name パラメーターが参照されます。

円グラフの場合、凡例の動作が異なります。数字の配列によってグラフが指定された場合には、数字を凡例に使います。それ以外の場合には、legendtext、数値の順でオブジェクトのプロパティーを調べます。

var legend1 = new dc.widget.Legend({chart: chart1, horizontal: true}, "legend1");

Dojo Toolkit 1.5 の機能

このセクションでは、Dojo Toolkit 1.5 の新しいグラフ作成機能の概要を説明します。

地図グラフ

地図ウィジェット (dojox.geo.charting.Map) は、Web ページ上に簡単に地図を作成できる、非常に便利な新しいウィジェットです。地図グラフのデータには、地図のフィーチャーごとの詳細情報を保持することができます。各地図は、いくつかのフィーチャーに分割することができます。例えば、あるフィーチャーは世界地図の中の 1 つの国の場合もあれば、ある国の地図の中の 1 つの地方の場合もあります。また、地図の各フィーチャーのツールチップ・データをカスタマイズすることもできます。各フィーチャーには、ズーム・イン/ズーム・アウトによるエフェクトと、カスタマイズ可能な対話型イベントが提供されます。

リスト 8 は地図グラフ・ウィジェットのテスト・ケースを示しています。

リスト 8. 地図グラフ・ウィジェットのテスト・ケース
dojo.require("dojox.geo.charting.Map");
dojo.addOnLoad(function(){
	var USStates = new dojox.geo.charting.Map("USStates",
"../resources/data/USStates.json");
	USStates.setMarkerData("../resources/markers/USStates.json");
});

上記の例で、この地図グラフのデータ・ソースは USStates.json です。リスト 9 はこの地図の内容です。この中には、詳細データを説明したコメントも含まれています。

リスト 9. 地図グラフのコード (コメントを含む)

リスティングを見るにはここをクリック

リスト 9. 地図グラフのコード (コメントを含む)

new dojox.geo.charting.Map(container, shapefile)// container//	map container html node/id// shapefile//	map shape data url, handle as json

shapefile data format:

{
//layerExtent: map boundary
  "layerExtent":[0, 0, 8036, 5263],
  //"featureNames: list of map unit, like a province in a country map
"featureNames":["RI", "VT", "HI", "ME", "VA", "MI", "DE", "ID", "IA", "MD", "MA",
"AR", "IL", "UT", "IN", "MN", "AZ", "MO", "MT", "MS", "NH", "NJ", "NM", "AK", "TX",
"AL", "NC", "ND", "NE", "NY", "GA", "NV", "TN", "CA", "OK", "OH", "WY", "FL", "SD",
"SC", "CT", "WV", "DC", "WI", "KY", "KS", "OR", "LA", "WA", "CO", "PA"],
//features: map unit shape info
  "features":{
    "RI":{
//unit shape vertex described in polygon: [[polygon1_vertex1_x,
polygon1_vertex1_y, p_v2_x, p_v2_y, ...], [p2_v1_x, p2_v1_y, ...], ....]
      "shape":[[7641, 1436, 7651, 1437, 7661, 1467, 7661, 1467, 7653, 1478, 7641,
1436], [7541, 1398, 7559, 1392, 7598, 1380, 7615, 1420, 7635, 1430, 7635, 1431, 7627,
1445, 7626, 1427, 7615, 1429, 7607, 1410, 7618, 1435, 7606, 1444, 7617, 1460, 7618,
1506, 7612, 1496, 7568, 1527, 7568, 1526, 7541, 1398], [7633, 1474, 7639, 1442, 7645,
1476, 7631, 1485, 7633, 1474]],
//center: center point
      "center":[7585, 1442],
      //shape's rectangle boundary
      "bbox":[7541, 1380, 120, 147]
    },
    "VT":{
      "shape":[7427, 828, 7434, 848, 7424, 882, 7445, 909, 7444, 926, 7390, 984, 7404,
1022, 7383, 1128, 7402, 1236, 7394, 1266, 7414, 1289, 7393, 1294, 7309, 1313, 7302,
1314, 7267, 1166, 7255, 1151, 7239, 1162, 7241, 1126, 7216, 1076, 7218, 999, 7196,
969, 7184, 893, 7202, 888, 7427, 828],
      "center":[7317, 1057],
      "bbox":[7184, 828, 261, 487]
    },
    .......
  }
}

この地図グラフを Web ページに表示すると図 7 のようになります。

図 7. 単純な地図グラフ
米国の地図グラフにカンザス州が表示されています。このグラフには、この単純な地図でズーム・インとズーム・アウトがサポートされていることが示されています。

グラデーションとパターン

dojox のグラフにグラデーションをつける新機能を利用すると、地図の塗りつぶしに見事なグラデーションをつけることができます。グラデーション機能はグラフのテーマによってカスタマイズすることができます。グラフ全体に対してグラデーションをつけることも、個々の形状に対してグラデーションをつけることもできます。またグラデーション機能には、リニアに変化するスタイルと放射状に変化するスタイルがあります。

図 8 は、さまざまなグラデーション・エフェクトを示しています。

図 8a. リニアに変化するグラデーションと放射状に変化するグラデーション
リニアに変化するグラデーションをつけた赤色と青色の縦棒グラフ
図 8b. 別の形式でリニアに変化するグラデーションをつけた赤色と黄色の縦棒グラフ
別の形式でリニアに変化するグラデーションをつけた赤色と黄色の縦棒グラフ
図 8c. 放射状に変化するグラデーションをつけた黄色と赤色の円
放射状に変化するグラデーションをつけた黄色と赤色の円

図 8 の最初のグラフでは形状ごとにグラデーションをつけています。中央のグラフはグラフ全体に対してグラデーションをつけています。どちらもリニアに変化するグラデーションです。図 8 の最後のグラフは放射状に変化するグラデーションです。リスト 10 は、この例のコードを示しています。

リスト 10. グラデーション・エフェクトを設定したコード
var theme1 = new dojox.charting.Theme({
        seriesThemes: [
            {
                fill: {
 type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 100,
                    colors: [{ offset: 0, color: "white" }, { offset: 1, color: "red" }]
                }
            },
            {
                fill: {
                    type: "linear", space: "plot", x1: 0, y1: 100, x2: 100, y2: 0,
                    colors: [{ offset: 0, color: "white" }, { offset: 1, color: "blue" }]
                }
            },
            {
                fill: {
                    type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 100,
                    colors: [{ offset: 0, color: "white" }, { offset: 1, color: "green" }]
                }
            }
        ]
    });

var chart1 = new dojox.charting.Chart2D("c1").
setTheme(theme1).
    addAxis("x", {fixLower: "major", fixUpper: "major", natural: true}).
	addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", 
	includeZero: true,  minorTickStep: 0.5}).
    addPlot("default", {type: "Columns"}).
    addSeries("Series A", [1, 2, 3, 4, 5]).
    addSeries("Series B", [5, 4, 3, 2, 1]).
	render();

グラデーションがすべて theme1 でカスタマイズされていることがわかります。fill のパラメーターの type は linear または radial、space は plot または shape、等々です。リスト 11 を見ると詳細がわかります。

リスト 11. fill パラメーターを使ったグラデーション・エフェクト

リスティングを見るにはここをクリック

リスト 11. fill パラメーターを使ったグラデーション・エフェクト

seriesThemes: [
    {
        fill: {
// summary: fill for plot1// type: string://	gradient fill type  e.g. “linear”, “radial”// space: string://	gradient fill area  e.g. “plot”, “shape”, “shapeX”// x1: Number: //	gradient fill start point offset percentage(0-100) for x Axes// x2: Number: //	gradient fill end point offset percentage(0-100) for x Axes// y1: Number: //	gradient fill start point offset percentage(0-100) for y Axes// y2: Number: //	gradient fill end point offset percentage(0-100) for y Axes// colors: Array//	gradient fill settings
            type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 100,
            colors: [{ offset: 0, color: "white" }, { offset: 1, color: "red" }]
        }
    },
    {
        fill: {
            type: "linear", space: "plot", x1: 0, y1: 100, x2: 100, y2: 0,
            colors: [{ offset: 0, color: "white" }, { offset: 1, color: "blue" }]
        }
    },
    {
        fill: {
            type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 100,
            colors: [{ offset: 0, color: "white" }, { offset: 1, color: "green" }]
        }
    }
]

パターンのカスタマイズ方法はグラデーションのカスタマイズ方法と同じです。

グラデーション用の API を使用すると、多くの複雑なグラデーション効果をカスタマイズして見栄えを良くすることができます。図 9 は横棒グラフに複雑なグラデーション効果をつけた例を示しています。

図 9. グラデーションをつけた横棒グラフ
赤色、黄色、青色の複雑なグラデーションをつけた横棒グラフ

まとめ

この記事では、Dojo の視覚化ライブラリーに用意された主なグラフのタイプについて概要を説明しました。よく使われるグラフの基本的な使い方を、Plot、Axis、Series などを含めて学びました。また、ズーム、アクション、アニメーション・エフェクトについて、さらに Dojo 1.5 の新しい地図機能とグラフ作成機能についてもその一部を学びました。

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=592278
ArticleTitle=Dojo を使って動的なグラフや図を作成する
publish-date=11022010