あまりニーズがないかもしれませんが、社内の組織などを階層構造で視覚化したいという場合に使えるjQueryベースのライブラリです。
体制図を作りたいといった場合にも使えるかもしれません。
OrgChartは、決められたデータソースを指定するだけで組織図を表示できます。
似たようなものとしては、Google ChartのOrganization Chartがありますが、デザイン的にOrgChartのほうが綺麗に見せることが出来る点や、Googleのほうはライブラリのソースをウェブ経由で読み込んで利用するため、サーバーにライブラリを保存して使いたいといった場合にOrgChartのほうが利用しやすいかもしれません。
ただ、jQuery3系でしか動かないため注意が必要です。
OrgChartの使い方
まずは、OrgChartをサーバーにインストール（というか設置）する必要がありますが、方法はページに記載のとおりBowerやnpmコマンド経由でも可能ですが、対応してない場合はGitHubからソース一式をダウンロードして適当な場所にJavaScriptを保存しておきましょう。
後は、サンプルなども付属していますのでその辺を見ればわかるのですが、シンプルな組織図を書く例のHTMLは下記のような感じ。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>組織図</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<script type='text/javascript' src="https://localhost/cmm/js/jquery3.js"></script>
<link rel="stylesheet" href="https://localhost/cmm/css/jquery.orgchart.css">
<script type="text/javascript" src="https://localhost/cmm/js/jquery.orgchart.js"></script>
<script type="text/javascript">
(function ($)
$(function () {
var datascource = {
'name': '鈴木 一郎',
'title': '社長',
'children': [
{ 'name': '田中 太郎', 'title': '部長', 'className': 'manager',
},
{ 'name': '佐藤 花子', 'title': '部長', 'className': 'manager',
'children': [
{ 'name': '渡辺 次郎', 'title': '課長' },
{ 'name': '高橋 三郎', 'title': '課長',
}
]
}
]
};
$('#chart-container').orgchart({
'data' : datascource,
'nodeContent': 'title'
});
});
)(jQuery);
</script>
</head>
<body>
<div id="chart-container"></div>
</body>
</html>
上記で出来上がった組織図は下記。
基本的に、dataというプロパティにJSON形式のデータを渡せばそれに従って組織図を表示してくれます。
サンプルにもありますが、HTMLソース内のUL/LIタグを読み取って解析させることも出来るようです。
後は、幾つかオプションが用意されており、例えばデフォルトでは上記のように縦の組織階層で表示されますが、左右にトップ階層を表示したりもできます。
すごいのは、表示した組織図を保存することが出来たり、自分で組織を追加したりといったカスタマイズが出来ることでしょうか。
色合いなどを変えたい場合は、CSSで該当クラスのプロパティを上書きしていくような感じとなります。
ただ、そこまで自由度が高くも無いので例えば組織の箱の幅が狭いから広げたいといった場合に、単純に該当のCSSのwidthとかを弄ると縦表示の場合は綺麗に広がってくれるけど、横表示にすると罫線が崩れてしまうといったところもあるようです。
OrgChartを使うときのTipsなど
組織図の表示は簡単にできるのですが、何が一番大変かってそのデータ構造を作る部分だったりします。
組織は動的に動くことが多いと思いますし、組織が大きい場合はデータ量が多いためHTMLを手動で作り上げるのは現実的ではなかったりします。
組織情報はデータベースなどにあるかと思うので、それを利用してJSON形式に変換するのが手っ取り早いのですが、DBのデータ構造とOrgChartで必要なJSON形式の配列構造には違いがあるのでその差分を吸収する必要があります。
例えば、組織図のデータ構造が下記のようになっているとします。
| 組織コード | 組織名 | 親組織コード |
| 100 | 人事部 | 000 |
| 110 | 採用課 | 100 |
| 120 | 管理課 | 100 |
| 130 | 労務課 | 100 |
で、OrgChartに渡す必要があるデータ構造は下記（PHPの場合の例）。
array (
0 =>
array (
'CODE' => '100',
'NAME' => '人事部',
'PARENT' => '000',
'children' =>
array (
0 =>
array (
'CODE' => '110',
'NAME' => '採用課',
'PARENT' => '100',
),
1 =>
array (
'CODE' => '120',
'NAME' => '管理課',
'PARENT' => '100',
),
2 =>
array (
'CODE' => '130',
'NAME' => '労務課',
'PARENT' => '100',
),
),
),
)
要は、親組織の中にchildrenキーをつくりその中に子組織の情報を入れ子にしてあげなくてはなりません。
で、これを作るための変換用PHPスクリプトが下記。
public function createTreeInArray($divisionList = [], $rootParantCode = "000", $codeColumn = 'CODE', $parentColumn = 'PARENT') {
if (! is_array($divisionList)) {
return false;
}
$tree = [];
$index = [];
foreach ($divisionList as $value) {
$id = $value[$codeColumn];
$pid = $value[$parentColumn];
if (isset($index[$id])) {
$value['children'] = $index[$id]['children'];
}
$index[$id] = $value;
if ($pid == $rootParantCode) {
$tree[] = & $index[$id];
} else {
$index[$pid]["children"][] = & $index[$id];
}
}
return $tree;
}
データ構造の変換ができれば、後はjson_encode()を通すだけです。
もう1つは、組織の箱をクリックした際に開閉するようなイベントが付随しているのですが、個人的にはいらないと思ったり。
ただ、オプションで消すことが出来そうにないので、クラスを削除することで開閉イベントのトリガーが発生しないようにしてみました。
$('.leftEdge').removeClass('leftEdge');
$('.rightEdge').removeClass('rightEdge');
後は、組織や人名をクリックした際にイベントを発火させたいということをしたいかもしれません。
これについては、シンプルに受け渡すデータの中にJavaScriptのコードを埋め込むか、クラスの指定ができるのでクラス名を指定しておいて、別でそのクラスに対してのクリックイベントを付け加えるということで対応ができます。
最初の例で書いたJavaScript内には部長に対してclassNameのプロパティでmanagerをセットしています。
あとは、このクラスに対してclickイベントを書いてあげるといった具合です。
[PR]
[PR]
関連記事
[JS] Webアプリケーションでデスクトップへの通知機能を作る
ノンプログラミングでも利用可能！PHPで多様なグラフを作れるpChart
[PHP] 簡単に画像の加工ができるintervention/image