ITエンジニア/デザイナ向けにオープンソースを毎日紹介

階層的な構造を表すのに便利なのが組織図です。しかし形が独特なものになりがちで、他のグラフに比べると描画ライブラリが少ないように思います。その結果、画像で作られて更新メンテナンスが大変な状態になります。

そこで組織図を描くのに便利なライブラリを一つ知っておくと色々な場面で使い回しができるようになるでしょう。今回はjQueryベースの組織図ライブラリ、jOrgChartを紹介します。

格好いい組織図が描けます!
格好いい組織図が描けます!

jOrgChartの使い方

HTMLの構造は次のようになります。リストを使うので描くのは簡単です。

<ul id="org" style="display:none">
<li>
  Food
  <ul>
    <li>Beer</li>
    <li>Vegetables
      <ul>
        <li>Pumpkin</li>
        <li><a href="http://tquila.com" target="_blank">Aubergine</a></li>
      </ul>
    </li>
    <li>Bread</li>
    <li>Chocolate
      <ul>
        <li>Topdeck</li>
        <li>Reese's Cups</li>
      </ul>
    </li>
  </ul>
</li>
</ul>

後はJavaScript側で次のように実行します。

jQuery(document).ready(function() {
  $("#org").jOrgChart();
});

ノードをクリックすると、それ以下のノードが非表示になります。
ノードをクリックすると、それ以下のノードが非表示になります。

jOrgChartのデザインはスタイルシートで設定できますので、色を変えたりするのは簡単です。また、各ノードにはテキストの他、リンクや画像を埋め込むこともできます。

jOrgChartはjQuery/JavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。

jOrgChart - A jQuery OrgChart Plugin

wesnolte/jOrgChart

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2