jQuery gantt

JavaScript

軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

jQuery ganttは、軽量でシンプルなガントチャートを実装することができるjQueryプラグインです。見やすい配置によるシンプルなガントチャートを表示させたい人は要チェックです。gzip圧縮で5KBほどと、とても軽量なところがいいですね。

jQuery gantt

デモ

デモでは上部の横軸に日付が表示されていて、縦軸にはその日付に対応したスケジュールなどをチェックできるようになっています。

対応している日程の範囲をバーで色付けしているので、どのくらいの期間なのかを一目で把握できるのが便利ですね。また、色別にジャンルを分けることもできるので、シンプルで見やすいガントチャートを設置することが可能です。

下へスクロールしていくことでスケジュールがどんどん先の日付へ進んでいきます。下へスクロールしていっても横軸の日付は固定されたまま表示されるので、スケジュールがどの期間に対応しているのかを常にチェックできます。

セッティング可能な項目には、data、dataURL、startDate、endDate、cellWidth、cellHeight、stickyHeader、mouseScroll、mouseScrollpx、lazyLoad、autoHideがあります。

互換性のあるブラウザは、IE11+、Edge、Chrome、Firefox、Opera、Safariです。ライセンスはMITとのこと。

jQuery gantt

関連記事

  1. Textualizer

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  2. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  3. no-image

    JavaScript

    シンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」

    umodalはスッキリしたシンプルで美しいモーダルウィンドウを実装でき…

  4. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  5. no-image

    JavaScript

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  6. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP