Google Chart Toolsを使ってサイトマップを描こう！ : アシアルブログ

2011/12/21 │カテゴリ： Tech　 JavaScript　 Google Chart Tools　グラフ　組織図　

Google Chart Toolsを使ってサイトマップを描こう！

こんにちは！最近寒いですが、みなさんいかがお過ごしでしょうか。
クリスマスも近いということで、クリスマスツリー→ツリー→組織ツリー→組織図！エンジニアのクリスマスはツリーですね！
今回は、Org Chartを使ってサイトマップを描いてみたいと思います。

1. Google Chart Toolsって？

Googleが提供している、グラフや表を簡単に作成するAPIです。（Google Chart Tools）
チャートギャラリーには、様々なグラフがギャラリー形式で並んでいます。
中には、メーターや世界地図、札束積み上げグラフ（？）など、ユニークなグラフもあります。
Code Playgroundでは、実際にコードを書いて即時実行しながら、様々なチャートで遊ぶことができます。

今回は、この中からOrg Chart（組織図）を使って、サイトマップを描いてみます。

2. サイトマップの作成

Org Chartでは、こんなかんじでサイトマップが描けます。

どんなコードかというと、こちら！

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
var chart;
// visualizationを読み込む
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawChart);
// チャートの設定と描画
function drawChart() {
var data = new google.visualization.DataTable(); // ---(1-1)
data.addColumn('string', 'Name'); // ---(1-2)
data.addColumn('string', 'Parent'); // ---(1-3)
data.addColumn('string', 'ToolTip'); // ---(1-4)
// ---(2)
data.addRows([
[{v:'top', f:'トップページ'}, '', 'tooltip'], // ---(3)
[{v:'company', f:'会社紹介'}, 'top', ''],
[{v:'company-index', f:'ご挨拶'}, 'company', ''],
[{v:'about', f:'会社概要'}, 'company', ''],
[{v:'system', f:'Webシステム構築'}, 'top', ''],
[{v:'school', f:'PHPスクール'}, 'top', ''],
[{v:'course', f:'各コースの概要と紹介'}, 'school', ''],
[{v:'course1', f:'PHP基礎編'}, 'course', ''],
[{v:'course2', f:'PHP中級実務編'}, 'course', ''],
[{v:'orientation', f:'講座説明会（無料）のご案内'}, 'school', ''],
[{v:'business', f:'製品/サービス'}, 'top', ''],
[{v:'phppro', f:'PHPプロ！'}, 'business', ''],
[{v:'phpbiz', f:'PHPbiz'}, 'business', ''],
]);
// (4)
chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml: true,} );
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>

上記のコードが基本形です。まず、(1)についてご説明します。
(1-1)では、DataTableのインスタンスを作成します。
(1-2)〜(1-4)では、そのDataTableにカラムを3つ追加しています。
(1-4)でツールチップカラムを追加すると、そのノード（青いボックス）にマウスを合わせた時、ぺろっとツールチップが表示され、そこに表示する文字列を設定することができます。
データベースでいうと、addColumnでカラムを作るというイメージです。

var data = new google.visualization.DataTable(); // インスタンス作成
data.addColumn('string', 'Name'); // はじめのカラム：ノードの名前
data.addColumn('string', 'Parent'); // 次のカラム：親ノードの名前
data.addColumn('string', 'ToolTip'); // 最後のカラム：ツールチップ

つまり、ノードと親ノードだけ最低でも設定すればよく、ツールチップは付加的なものということです。

次に、(2)でデータを追加していきます。
data.addRowsは、データベースでいうINSERTに近いイメージです。今回のソースでは、ノードの親子関係がわかりやすいようインデントをつけました。

(3)では、実際にデータを定義しています。
はじめの要素であるノードの名前をキーと値の配列にすることで、データのIDと表面に出る文字列を別々に定義できます。
2つめのParentカラムを空文字にすることで、親ノードがないもの（ルートノード）を定義できます。
3つめのToolTipには、マウスを合わせた際のツールチップで表示する文字列を定義します。

[{v:'top', f:'トップページ'}, '', 'tooltip'], // ルートノード：一意なキーはtop, 表示するのは「トップページ」
[{v:'company', f:'会社紹介'}, 'top', ''], // キーcompany、「会社紹介」というノードは、親のキーが「top」

こうして、ノードにNameを振り、親ノードのNameをParentに指定していくことで、どんどんツリーをぶら下げていくことができます。
キーと表示する文字列が同じ場合は、下記のように簡単に書けます。

['top' '', 'tooltip'], // ルートノード：キーはtopで、表示もtopとなる。
['company', 'top', ''], // キーはcompanyで、親のキーはtop

最後に、(4)で、ドキュメント内のchar_divというDIVに、チャートを書き込みます。
描かれたOrg ChartはHTMLのTable要素で書かれています。

chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml: true,} );

これで、基本的なOrgChartを描くことができます！

3. もっと！Org Chart

これまでの説明では、Org Chartの基本的な部分について触れました。
ここからは、もっとOrgChartを豊かにするためのオプションについてご説明します。

CSSでデザインを変えたい

CSSでまとめてデザイン変更したいですね？調べておきました。

.google-visualization-orgchart-node
ノードに付いている基本的なクラス
.google-visualization-orgchart-node-medium
後述する、ノードの大きさによるクラス。
small, medium, largeがあるので、末尾を変えてください。
.google-visualization-orgchart-nodesel
ノードをクリックしたときに適用されるクラス。

ノードのスタイルを変更したい

ノード全体のスタイルならばCSSで変更できますが、このノードだけ変更したい！ということはないでしょうか。
例えば、ルートノードだけピンクにしたい…とか。
そういった場合、クラスはどれも同じなため、CSSで「このノードだけ」「こうしたい」と変更するのはなかなか難しいですね。

これで、ノードを指定してスタイルを変更できます！

data.setRowProperty(2, 'style', 'background:#ffe5ff;border-color:#ff8989;');
data.setRowProperty(1, 'selectedStyle', 'background:#FF0000;');

第1引数は、ノードの番号です。これは、addRowsされた順番に0から振られている番号です。
つまり、先ほどのコードでいうと、0は「トップページ」、1は「会社紹介」、2は「ご挨拶」というような指定の方法です。

第2引数は「style」か、「selectedStyle」を指定します。
style はそのノードのスタイル、selectedStyleはクリックしたときのスタイルです。

第3引数には、インラインスタイルを入れてください。

このsetRowPropertyは、addRowsからdrawの間に入れてください。
データを定義する→データにスタイルを適用する→チャートを描くという流れだからです。

drawするときのプロパティを指定したい

drawするときに、プロパティを指定することができます。

chart.draw(data, {
allowHtml: true, // ノードのHTMLを許可するか。Default=false
size: 'medium', // セルの大きさ。Default='medium'
allowCollapse: false, // ダブルクリックしてどうなるか。Default=false
nodeClass: 'asial', // ノードのクラス名
selectedNodeClass: 'asial' // クリックされたとき（Selected）のクラス名
});

allowHtmlは、ノードの表示する文字列内にHTMLを含めてもよいか設定する項目です。
デフォルトはfalse（許可しない）ですが、trueにすると以下のように、HTMLを含めることができます。

[{v:'top', f:'<span style="color: #FF0000;">トップページ</span>'}, '', 'tooltip'],

sizeは、ノードのサイズです。small, medium, largeから選ぶことができます。デフォルトはmediumです。
ここで選択したノードのサイズが、クラス名としてTD要素に適用されます。（.google-visualization-orgchart-node-mediumなど）

allowCollapseは、ノードをダブルクリックしたときに表示・非表示アクションをさせるかどうか設定する項目です。
デフォルトはfalse（常に表示）で、ノードは全部展開されています。
trueにすると、子ノードがあるノードをダブルクリックしたときに、子ノードを隠すようなアクションをします。
もう一度ノードをダブルクリックすると子ノードを展開します。

nodeClassは、各ノードのクラス名です。
デフォルトのクラス名でなく、独自のクラスが使いたいときに利用します。
同様に、selectedNodeClassも、クリックされたときのクラス名となります。

おわりに

この他にもOrg Chartでは、イベントの取得や様々なメソッドなどが提供されています。
Chart ToolsにはOrg Chart以外にも魅力的なチャートがたくさんありますから、ぜひ使ってみてください！

アシアルの中の人が技術と思いのたけをつづるブログ