タスク、プロジェクト管理の表示に便利なガントチャートライブラリまとめ
業務システムでは各人員のタスク管理が重要になります。単発のタスクだけでなく、グルーピングしたり、さらにあるタスクの成果物が他のタスクに関連したりしていると必要になってくるのがガントチャートです。
今回はWebベース、HTML5で作られたガントチャートライブラリをまとめて紹介します。自社システムに組み込む際にぜひ参考にしてください。
Twproject Gantt
Webサービスのガントチャートも提供していますが、オープンソース（MIT License）で取得もできます。チャート内での変種機能、クリティカルパス設定、リサイズ、スクロール、SVGによるドロー、ドラッグ&ドロップによる移動などの機能がサポートされています。
jQuery.ganttView
シンプルな色合いのガントチャートです。ドラッグ&ドロップ、スクロール、イベントのハンドリングなどの機能があります。シンプルなUIなのでカスタマイズも容易そうです。
JSGantt
タスク同士の関連具合が表現できたり、タスクの進捗度も表示できます。子タスクの集計として親タスクを設定できるなど、こだわった表現が可能です。期間も日、週、月、四半期から選択できます。
FREE javascript gantt – JSGantt HTML and CSS only
dgrid gantt chart
dgridと言うライブラリの一つですが、タスクグループ、進捗表示、タスクの関連表現、ローカライズ表示など機能は多いです。
dgrid – A Dojo grid created by SitePen
jQuery.Gantt
シンプルなUIですが、拡大/縮小やスライダーを使った日付移動がサポートされています。カスタマイズできる要素も多くあります。
Gantt chart for Angular.js
その名の通りAngular.jsを使ったガントチャートです。週末を非表示にしたり、日付などによる並び替え機能があります。
dhtmlxGantt
DHTMLXの一機能として提供されています。かなり高機能で、その場でデータの編集も行えるのがポイントです。タスクの細かなつながりを表現したり、進捗度合い、フィルタリング、時間単位の表示などが可能です。
Editable JavaScript Gantt Chart – dhtmlxGantt
Gantt Add-on
多言語対応しており、日本語やタイムゾーン指定もできます。タスクの表示はそれほど高機能ではありませんが、細かく表示のカスタマイズが行えるようになっています。
Ganttr
シンプルなガントチャートですが、タスク同士の関連、リソース、ステータス表示がサポートされています。左側の表示を固定にできないのが残念な点です。
Timesheet.js
タイムシリーズのデータを表現するのに用いるライブラリですが、ガントチャートにも使えそうです。すっきりとしたデザインなので、他のライブラリとは随分違った印象になりそうです。
Timesheet.js – Open time tables with HTML, JavaScript and CSS …
いかがでしたか。ガントチャートとして必要な要件はまずタスクの表示でしょう。さらに関連やグルーピングができればベストです。多機能なものになるとソートやフィルタリング、さらにその場で編集できると言った機能があります。
基本的に表示についてはJSONデータを使っていますので、システムからタスクの状態をJSON出力すれば良さそうです。要件に合わせて選んでみてください！
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
hifive開発者ブログ 
Trackbacks & Pingbacks
コメントは受け付けていません。