目次


Dojo を使ってグラフをカスタマイズする

縦棒グラフ、横棒グラフ、線グラフ、面グラフの見栄えを改善する

Comments

はじめに

データを視覚化すると、単なる統計データを超え、小さな視覚スペースに大量の情報を表示して結論を示すことができます。グラフはデータを視覚化する上で最も重要な形式の 1 つです。グラフは多くの場合、大量のデータやデータの各部分の関係を理解しやすくするために使われます。

この記事では、dojox.charting という、Dojo 1.5 (「参考文献」を参照) のデータ視覚化ライブラリーをカスタマイズする方法を学びます。Dojo のグラフ作成機能をカスタマイズするための基本として、Plot (グラフの種類) や Axis (軸) をカスタマイズする方法を学びましょう。またこの記事では、グラフをカスタマイズするために使われる高度なパラメーター (目盛、グラデーション、ズームなど) についても説明します。

Dojo のグラフ・ライブラリー

Dojo には、dojox.charting という素晴らしいグラフ・ライブラリーが用意されています。dojox.charting は多くの機能をサポートしており、また新機能が次々に追加されています。Dojo のグラフ作成モジュールを利用すると、魅力的で機能的かつ動的なグラフや図を短時間で容易に Web ページに追加することができます。そのために必要なものは、基本的な JavaScript のスキルと Dojo のみです。

どのようなグラフを構成する場合にも言えることですが、Plot (グラフの種類)、Axis (軸)、Series (データ系列) を定義する必要があります。Plot はデータの視覚化方法を指定します。Axis は視覚化されるデータの次元に関する指定を行います。そこにはラベルの指定なども含まれています。Series はグラフによって視覚化されるデータ系列を記述します。図 1 は Dojo のグラフ・ライブラリーの概要を示しています。

図 1. Dojo のグラフ・ライブラリー
この画像には Dojo のグラフ・ライブラリーに用意された 9 種類のグラフが表示されています。
この画像には Dojo のグラフ・ライブラリーに用意された 9 種類のグラフが表示されています。

Dojo のグラフ・ライブラリーは多くの種類のグラフをサポートしており、例えば縦棒グラフ、横棒グラフ、面グラフ、線グラフ、円グラフ、バブル・グラフ、ローソク足グラフ、散布図などがサポートされています。この記事では、最もよく使われる 4 種類のグラフとして、縦棒グラフ、横棒グラフ、面グラフ、線グラフをカスタマイズする方法に焦点を絞ります。

軸 (Axis) のカスタマイズ

軸は非常に柔軟なオブジェクトであり、カスタマイズのパラメーターが非常に多数あります。最初はパラメーターが多すぎて混乱するかもしれないので、以下のようにパラメーターをグループ分けします。

  • 目盛
  • スケーラー
  • 位置
  • ラベル
  • ズーム

目盛

目盛には主に、major、minor、micro があります。major 目盛と minor 目盛にはラベルを付けることができます。下記のコードでは、すべての機能を指定した軸を作成しています。

chart.addAxis("x",{ 
    majorLabels: true, majorTicks: true, majorTick: {length:10},
    minorLabels: true, minorTicks:true, minorTick:{length:6},
    microTicks: true, microTick:{length:3},
    majorTickStep:100,
    minorTickStep:20,
    microTickStep:2
})

図 2 に示す軸の構造を見ると、上記のコードを理解できるはずです。

図 2. 軸の構造
この画像には、それぞれの目盛の間隔と違いが表示されています。
この画像には、それぞれの目盛の間隔と違いが表示されています。

スケーラー

軸のスケーラーは、軸の数値範囲を指定するために使われます。範囲の指定には以下の優先順位があります。

  • from-toincludeZero よりも優先順位が上です。from-to は軸の表示範囲を指定するために使われます。
  • includeZeromin または max よりも優先順位が上です。
  • minmax はグラフの表示範囲を指定するために使われます。

以下のコードはその例を示しています。

chart.addAxis("x",{
includeZero: false, 
from: 10,to: 140,
min: 20, max: 120
})

図 3 は from-tomin-max で範囲を指定したグラフを示しています。

図 3. from-to と min-max で範囲を指定したグラフ
横棒グラフで from-to と min-max で範囲が指定されています。from-to で指定された範囲の方が min-max で指定された範囲よりも広くなっています。
横棒グラフで from-to と min-max で範囲が指定されています。from-to で指定された範囲の方が min-max で指定された範囲よりも広くなっています。

位置

軸の位置というのは、プロット領域に対して座標軸がどこにあるかを指します。以下のコードでは 縦軸 Y が左側にあり、下から座標が始まっています。

chart.addAxis("y",{
    vertical:true, 
    leftBottom: true
})

図 4 は Y 軸が右側にある例を示しています。

図 4. Y 軸が右側にあるグラフ
Y 軸が右側にある積み上げ面グラフ
Y 軸が右側にある積み上げ面グラフ

ラベル

ラベルのカスタマイズは非常によく行われます。ラベルは手動で定義することも、デフォルトのラベルをベースに、関数を使って新しいラベルを作成することもできます。以下のコードは手動でラベルを定義する例を示しています。

chart.addAxis("y", {
    vertical: true,
	labels: [
        {value: 0, text: ""},
		{value: 1, text: "Jan"}, 
        {value: 2, text: "Feb"},
		{value: 3, text: "Mar"}, 
        {value: 4, text: "Apr"},
		{value: 5, text: "May"}, 
        {value: 6, text: "Jun"}
]
});

図 5 は上記のコードから作成されたグラフを示しています。

図 5. 手動で Y 軸のラベルを定義したグラフ
横棒グラフで Y 軸のラベルとして月の名前の省略形が表示されています。

あるいは、以下のように関数のパラメーターを使ってラベルを作成することもできます。

chart.addAxis("x", {
	labelFunc:function(value){return value+" cm";}
});

図 6 は上記のコードから作成されたグラフを示しています。

図 6. 関数を指定してラベルを作成したグラフ
横棒グラフで X 軸にセンチメートルごとの目盛ラベルが振られています。
横棒グラフで X 軸にセンチメートルごとの目盛ラベルが振られています。

回転はラベル用として Dojo 1.5 で追加された新機能で、ラベルが重ならないようにするために役立ちます。度数を指定して、一定角度ラベルを回転することができます。下記のコードは X 軸に対してラベルを時計回りに 30 度回転し、Y 軸に対してラベルを反時計回りに 30 度回転します。図 7 はその結果を示しています。

chart.addAxis("x", {
	labels: [
		{value: 0, text: "zero"},
		{value: 2, text: "two"},
		{value: 4, text: "four"}
	],
	rotation: 30
}).addAxis("y", {
		vertical: true,
        labels: [
            {value: 0, text: ""},
			{value: 1, text: "January"},
            {value: 2, text: "February"},
			{value: 3, text: "March"}, 
            {value: 4, text: "April"},
			{value: 5, text: "May"}, 
            {value: 6, text: "June"}
		],
		rotation: -30
})
図 7. ラベルを回転したグラフ
横棒グラフで X 軸のラベルも Y 軸のラベルも軸に対して回転されており、ラベルの重複がありません。
横棒グラフで X 軸のラベルも Y 軸のラベルも軸に対して回転されており、ラベルの重複がありません。

ズーム

軸のズーム機能も Dojo 1.5 の新機能です。軸を拡大してグラフの一部を明確に表示することができます。軸のズーム機能は chart のメソッドです。

以下のコードでは、X 軸が 50 と 80 の間にあるグラフが表示されます。

chart.zoomIn("x",[50,80]);

Dojo のサイトでは軸のズーム制御のデモを見ることができます (「参考文献」を参照)。

棒グラフのカスタマイズ

縦棒グラフはヒストグラムとも呼ばれます。縦棒グラフでは縦棒を使って各カテゴリーの量を示し、垂直方向の目盛で量を示します。横棒グラフは水平方向のヒストグラムと考えることができます。棒グラフをカスタマイズするための要素には、間隔 (gap)、アニメーション (animation)、タイプ (type) があります。

間隔 (gap)

縦棒または横棒の間隔をピクセル単位でカスタマイズすることができます。その場合、デフォルトは 0px です。以下のコードはその例を示しています。図 8 は縦棒の間隔を指定した結果を示しています。

new dojox.charting.Chart2D("chart").addPlot("default",{
        type: "Columns",
        gap:8
})
図 8. 縦棒の間隔を指定したグラフ
縦棒グラフが表示されており、各棒の間隔が 8px 空いています。
縦棒グラフが表示されており、各棒の間隔が 8px 空いています。

アニメーション (animate)

特定の場所に、ある期間のアニメーション効果の後、縦棒または横棒を表示することができます。アニメーションはデフォルトではトリガーされません。以下のサンプル・コードでは、1000 ms のアニメーションの後に縦棒が表示されます。

new dojox.charting.Chart2D("chart").addPlot("default",{
        type: "Columns",
        animate:{duration: 1000}
})

Dojo のサイトには正の値や負の値を持つ複数のデータ系列を束ねた縦棒グラフのアニメーション・デモがあります。このグラフには、わかりやすいテーマが設定されており、1 秒間のアニメーションによってグラフが表示されます (「参考文献」を参照)。

タイプ (type)

縦棒グラフと横棒グラフの主なタイプには、デフォルト・タイプ (default)、複数のデータ系列を束ねたタイプ (clustered)、複数のデータ系列を積み上げたタイプ (stacked)、という 3 つがあります。さらに詳細にタイプを分けると、縦棒グラフ (Columns)、横棒グラフ (Bars)、複数のデータ系列を束ねた縦棒グラフ (ClusteredColumns)、複数のデータ系列を束ねた横棒グラフ (ClusteredBars)、複数のデータ系列を積み上げた縦棒グラフ (StackedColumns)、複数のデータ系列を積み上げた横棒グラフ (StackedBars) などがあります。

  • デフォルト・タイプ (default): 1 つのデータ系列のみを含みます。以下のコードはその例です。
    chart.addPlot("default",{type:"Columns"})
    chart.addPlot("default",{type:"Bars"})

    図 9 は上記のコードで指定されたデフォルトの縦棒グラフと横棒グラフを示しています。

    図 9a. デフォルト・タイプの横棒グラフ
    デフォルト・タイプの横棒グラフで、縦軸と横軸の両方に目盛とラベルが表示されています。
    デフォルト・タイプの横棒グラフで、縦軸と横軸の両方に目盛とラベルが表示されています。
    図 9b. デフォルト・タイプの縦棒グラフ
    デフォルト・タイプの縦棒グラフで、縦軸と横軸の両方に目盛とラベルが表示されています。
    デフォルト・タイプの縦棒グラフで、縦軸と横軸の両方に目盛とラベルが表示されています。
  • 複数のデータ系列を束ねたタイプ (clustered): 複数のデータ系列を追加することができます。複数の縦棒または横棒がグループ化されて並べられ、通常はグループ間に間隔が空けられます。以下のコードは 3 つのカテゴリーのデータ系列を束ねた横棒グラフを示しています。
    chart.addPlot("default",{type:"ClusteredBars", gap: 2}).
    addSeries("A",[1,3,5,7,2,4,6]).
    addSeries("B",[2,4,6,8,3,5,7]).
    addSeries("C",[6,4,2,7,5,3,1])
    図 10a. 複数のデータ系列を束ねた横棒グラフ
    複数のデータ系列を束ねた横棒グラフで、さまざまな色の横棒が束ねられ、目盛とラベルが表示されています。
    複数のデータ系列を束ねた横棒グラフで、さまざまな色の横棒が束ねられ、目盛とラベルが表示されています。
    図 10b. 複数のデータ系列を束ねた縦棒グラフ
    複数のデータ系列を束ねた縦棒グラフで、さまざまな色の縦棒が束ねられ、目盛とラベルが表示されています。
    複数のデータ系列を束ねた縦棒グラフで、さまざまな色の縦棒が束ねられ、目盛とラベルが表示されています。
  • 複数のデータ系列を積み上げたタイプ (stacked): 複数のデータ系列を含みます。複数のデータ系列を束ねたタイプの縦棒グラフ、横棒グラフと似ていますが、複数のデータ系列を積み上げたタイプでは、それぞれの値ごとの縦棒や横棒は 1 本にグループ化されて積み上げられます。以下のコードは 3 つのデータ系列を積み上げたタイプの棒グラフを示しています。
    chart.addPlot("default", {type:"StackedColumns",gap:2}).
    addSeries("A",[1,3,5,7,2,4,6]).
    addSeries("B",[2,4,6,8,3,5,7]).
    addSeries("C",[6,4,2,7,5,3,1])
    図 11a. 複数のデータ系列を積み上げた横棒グラフ
    複数のデータ系列を積み上げた横棒グラフで、何種類かの色の横棒が積み上げられ、目盛とラベルが表示されています。
    図 11b. 複数のデータ系列を積み上げた縦棒グラフ
    複数のデータ系列を積み上げた縦棒グラフで、何種類かの色の縦棒が積み上げられ、目盛とラベルが表示されています。

面グラフと線グラフのカスタマイズ

面グラフと線グラフはグラフを作成する場合によく使われ、両者は多くの点で似ています。面グラフは「塗りつぶされた」線グラフと考えることができます。線グラフに対するカスタマイズ方法はすべて、面グラフにも適用することができます。

面グラフと線グラフがサポートしている Plot タイプ (グラフの種類) には、複数のデータ系列を積み上げたタイプ (stacked) とデフォルト・タイプ (default) があります。複数のデータ系列を積み上げたタイプ (stacked) は、縦棒グラフや横棒グラフの場合と非常によく似ています。図 12 は積み上げ面グラフ (StackedAreas) の例を示しています。

図 12. 積み上げ面グラフ (StackedAreas)
積み上げ面グラフ (StackedAreas) が複数の色を使って海の波のように表示されています。
積み上げ面グラフ (StackedAreas) が複数の色を使って海の波のように表示されています。

面グラフと線グラフの主なカスタマイズ要素として、線とデータ・プロットのスタイルを指定することができます。

線のスタイル

面グラフと線グラフでは、tension を適用して線を滑らかにすることができます。tension の適用方法には、数字を指定する方法と、”X””x””S” というフラグを使用する方法の 2 つがあります。

推奨の方法としては、フラグを使います。フラグを使った方が (数字の指定による単純なベジェ曲線よりも) より正確なスムージング・アルゴリズムが使われるからです。

chart.addPlot("default", { type: "Area", tension:"S" })

図 13 は線を滑らかにした面グラフを示しています。

図 13. 線を滑らかにした面グラフ
線を滑らかにした面グラフ
線を滑らかにした面グラフ

データ・プロットのスタイル

面グラフと線グラフでは、線上にデータ・プロットを行ってデータ系列の項目を示すことができます。通常は以下のコードのように単純に markerstrue に設定します。

chart.addPlot("default", {
type: "Lines",
markers: true,
tension:"S",
})

図 14 は線グラフにデータ・プロットを行った場合を示しています。

図 14. 線グラフにデータ・プロットを行った場合
線グラフに 3 本の線が表示されており、各線にデータ・プロットが示されています。
線グラフに 3 本の線が表示されており、各線にデータ・プロットが示されています。

面グラフと線グラフには影 (shadow) を付けることができ、また影の方向と色を指定することができます。下記のコード・スニペットでは影を付ける機能を使っています。

chart.addPlot("default", {
	type: "StackedLines",
	markers: true,
	shadow:  {dx: 1, dy: 1, width: 2}
})

図 15 は線グラフに影を付けた場合を示しています。

図 15. 線グラフに影を付けた場合
線グラフに 3 本の線が表示されており、各線にはデータ・プロットが示され、またピンク色の影が背後に付けられています。
線グラフに 3 本の線が表示されており、各線にはデータ・プロットが示され、またピンク色の影が背後に付けられています。

まとめ

この記事では、Dojo のグラフ作成機能において、軸をカスタマイズする方法について学びました。また、最もよく使われるグラフのタイプである、縦棒グラフ、横棒グラフ、面グラフ、線グラフの 4 種類をカスタマイズする方法も学びました。

今後の記事に期待してください。今後の記事では、Dojo のグラフ作成機能を高度にカスタマイズする方法を取り上げ、よく使われる他のグラフ形式やテーマを深く掘り下げます。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=600318
ArticleTitle=Dojo を使ってグラフをカスタマイズする
publish-date=11162010