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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  2. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  3. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

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

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  5. jR3DCarousel

    JavaScript

    レスポンシブな3Dカルーセルを実装できる「jR3DCarousel」

    jR3DCarouselはレスポンシブな3Dカルーセルを実装できるjQ…

  6. Building a Vertical Timeline With CSS and a Touch of JavaScript

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP