アシアルブログ

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

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以外にも魅力的なチャートがたくさんありますから、ぜひ使ってみてください!