スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Prev.    Category    Next 

Google Chart Tools - 組織図

今回は Google Chart Tools組織図の紹介です。
組織図には Org Chart(Organizational Chart) を使用します。

なお、グラフの基本的な記述方法ついては省略していますので、 詳細は初回記事をご覧ください。

Org Chart の用途

使うのこれ ? と思う人もいるかも知れないので、 まず用途について説明したいと思います。


組織図というと用途が限定されてしまいますが、木構造の表示には向いています。 木構造を持ったデータを可視化したいということは多いでしょう。

ただ、組織図だけでは名前しか表示できないので、データの表示には不足かも知れません。 その場合も表と連携させることによって多くの情報と結びつけることができます。


表との連携については今後の記事で詳しく説明する予定です。

Org Chart 解説

今回はもっとシンプルな例で説明をします。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load('visualization', '1', {packages: ['orgchart']});
google.setOnLoadCallback(
    function () {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
            ['名前',                                         '上司',  'ツールチップ'],
            ['Mike',                                         null,   '社長'        ],
            ['Jim',                                          'Mike',  null         ],
            [{v: 'Alice', f: 'Alice<br/><em>名誉顧問</em>'}, 'Mike',  '名誉顧問'   ],
            ['Bob',                                          'Jim',   '部長'],
            ['Carol',                                        'Bob',    null]
        ]);

        // Create and draw the visualization.
        new google.visualization.OrgChart(
            document.getElementById('gct_sample_org')).
            draw(data, {allowHtml: true});
    }
);

</script>
<div id="gct_sample_org" style="width:200pt;" ></div>
Org Chart のパッケージは corechart ではなく、 "orgchart" を使います。
また、項目の表示に html を使っているので、 allowHtml: true のオプションを指定する必要があります。

データ形式

組織図では DataTable のデータを次のように使います。
用途
1 項目名
2 上位の項目(上司)
トップの項目の場合は null を指定します。
3 ツールチップ
3 列目を省略し、 2 列で書くことも可能です。
先頭行(列情報)にはわかりやすいように文字列を設定していますが、 特に使用はしません。

なお、ここでは arrayToDataTable でオブジェクトによる指定を行なっています。
これはデータの先頭列以降だからです。 データの先頭列('Mike')に対してはできないので注意して下さい。

次回は ?

今回で Google Chart Tools のグラフの紹介は終了です。
次回からは応用的な使い方について説明していきたいと思います。


関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
9位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
3位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

09月 | 2017年10月 | 11月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。