jOrgChart - 知っておくと便利な組織図を描くjQueryライブラリ
階層的な構造を表すのに便利なのが組織図です。しかし形が独特なものになりがちで、他のグラフに比べると描画ライブラリが少ないように思います。その結果、画像で作られて更新メンテナンスが大変な状態になります。
そこで組織図を描くのに便利なライブラリを一つ知っておくと色々な場面で使い回しができるようになるでしょう。今回はjQueryベースの組織図ライブラリ、jOrgChartを紹介します。
jOrgChartの使い方
HTMLの構造は次のようになります。リストを使うので描くのは簡単です。
-
Food
- Beer
- Vegetables
- Pumpkin
- [Aubergine](http://tquila.com)
- Bread
- Chocolate
- Topdeck
- Reese's Cups
後はJavaScript側で次のように実行します。
jQuery(document).ready(function() {
$("#org").jOrgChart();
});
jOrgChartのデザインはスタイルシートで設定できますので、色を変えたりするのは簡単です。また、各ノードにはテキストの他、リンクや画像を埋め込むこともできます。
jOrgChartはjQuery/JavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。