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. TabbedContent
  2. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

  3. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

  4. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  6. no-image

    JavaScript

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

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

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP