使いやすいガントチャートを探そう（3）「JSGanttChart」

WBSの表示などによく使われるガントチャートUIのライブラリ、これまでに紹介したものは以下の通りです。

• Angular Gantt
• jQuery.Gantt

今回も続いてガントチャートライブラリの紹介になります。WebベースのガントチャートはJSONでデータを渡し、それを描画するものが多くなっています。つまり既存の業務システムからデータフォーマットを合わせてJSON出力すれば同じような描画が可能ということです。タスク管理系システムやCRMなどと連携させてみると言った使い方も良さそうです。

今回はJSGanttChart、タスクの作成、編集もサポートしたガントチャートライブラリを紹介します。

JSGanttChart

JSGanttChartはjQuery、Backbone.js、Underscore.jsを使ったガントチャートライブラリとなっています。UIは次のようになります。左右のスクロールもサポートされており、多彩な表示が可能となっています。

マウスオーバーすると、該当のタスクがハイライトされます。

タスクの編集機能

表示処理は他に特に機能はありません。続いてタスクの作成、編集を行ってみます。

New Stageをクリックすると新しいタスクを登録する画面が表示されます。

日付はカレンダーで登録できます。

こんな感じでタスクが登録されました。

達成度合いを数値で入力できます。

さらに親タスクを指定したり、バッファーの表示もサポートしています。

データフォーマット

JSGanttChartは多機能な分、データフォーマットが多少複雑です。基本は次のようになります。

var gantt = JSGanttChart.create({
    resources: {
        programmer: "Peter West",
        supervisor: "mc",
        cosupervisor: "max"
    },
    types: {
      // 種別を指定
    },
    elements: [
      // タスクを指定
    ]
});

jQuery("#container").append(gantt.render().el);

種別（types）は次のように定義します。

analysis: {
   name: "Analysis",
   color: "#C79810"  // yellow
},
critical: {
  name: "Critical",
  color: "#CC0000" // red
},

ラベルと色を順番に指定します。

タスク一覧（elements）は次のようになります。

{
  id: "brief",
  name: "Project Brief",
  predecessors: ["meeting1"],
  startDate: "3 October 2011",
  endDate: "14 October 2011 16:00",
  type: "critical",
  slackEndDate: "21 October 2011 16:00",//slackDuration: 4, // or slackEndDate: date
  elements: [
    {
      id: "briefdraft1",
      name: "Draft 1",
      startDate: "3 October 2011",
      endDate: "14 October 2011 16:00",
      type: "analysis",
      percentageDone: 100,
      estimatedHours: 5
    },
    :
  ],
  percentageDone: 95,
  estimatedHours: 10
},
:

各種別ごとに子タスク（elements）を持ちます。その中で開始日、終了日を指定していきます。stackEndDateはバッファーです。

JSGanttChartは複雑な表示ができる分、多少データ構造も複雑になります。とは言え大規模なシステムなどでタスク構造が複雑化する中で分かりやすい表示を行おうと思ったらお勧めのライブラリです。

FlamingTempura/JSGanttChart