使いやすいガントチャートを探そう（2）「jQuery.Gantt」

前回のAngular Ganttに続いてガントチャートライブラリの紹介になります。ガントチャート風表示はExcelなどで行われている方もいますが、曜日ごとに色をかえたり、日程をずらす度にセル全体を入れ替えるのはとても面倒です。開始日、終了日そしてタスク名程度でWebブラウザ上に表示できるのであれば、ライブラリを使ってガントチャートを作る方がメンテナンス性もよく、見やすいものができるでしょう。

今回はjQuery.Gantt、jQueryで作れるガントチャートライブラリを紹介します。

jQuery.Gantt

jQuery.Ganttはその名の通り、jQueryプラグインとして作られているガントチャートライブラリです。hifiveの中で使うのも簡単でしょう。

見た目は次のようになっています。

タスクはグルーピングされていて、各グループの中に細かいタスクが並ぶ形になっています。

日付移動

スクロールは左右移動となっていて、タスク全体をスムーズに見渡せるようになっています。また、下の方にはスケジュールを移動するボタンがあり、そちらを押したりスライダーを移動させて日付を変更することもできます。

拡大/縮小

タスク全体の拡大、縮小表示がサポートされています。1時間単位から12時間単位まで変更できるようになっています。とはいえ、システム開発のように日付単位での区切りの場合はあまり使わないかも知れません。最大に拡大した時の表示は次のようになります。

使い方

使い方は簡単です。

$(".selector").gantt({
    source: "ajax/data.json",
    scale: "weeks",
    minScale: "weeks",
    maxScale: "months",
    onItemClick: function(data) {
        alert("Item clicked - show some details");
    },
    onAddClick: function(dt, rowId) {
        alert("Empty space clicked - add an item!");
    },
    onRender: function() {
        console.log("chart rendered");
    }
});

このように初期化します。sourceはAjaxを使った外部リソースの取得もサポートしています。配列でデータを渡すこともできます。

月や曜日のラベルを変更することもできます。

イベント

イベントとして、

• タスクのクリック
• タスク追加のクリック
• 描画完了時のコールバック

が用意されています。また、今日の日付までスクロールするアクションもあります。

データフォーマット

データは次のようなフォーマットになっています。まずグループの部分です。

source: [{
    name: "Example",
    desc: "Lorem ipsum dolor sit amet.",
    values: [ ... ]
}]

valuesの中にタスクが入る形になります。

values: [{
    to: "/Date(1328832000000)/",
    from: "/Date(1333411200000)/",
    desc: "Something",
    label: "Example Value",
    customClass: "ganttRed",
    dataObj: foo.bar[i]
}]

日付はマイクロタイムで指定する必要があります。

jQuery.Ganttは追加、編集処理をサポートしているわけではないので、基本的に表示に使うのが良いのではないでしょうか。別なシステムでタスク管理をしておき、その結果をjQuery.Ganttで確認するといった運用に向いています。

デモはjQuery.Ganttにて確認できます。

jQuery.Gantt