使いやすいガントチャートを探そう（1）「Angular Gantt」
企業のWebシステムにおいて重要なチャートの一つにガントチャートがあります。プロジェクト管理で使うことが多いですが、その他普段の業務の中で使うこともできるでしょう。
そこで今回からガントチャートの各種ライブラリをレビューしていきたいと思います。hifiveで使える（組み合わせやすい）もの、使えないものがありますのでご注意を。
Angular Gantt
Angular Ganttはその名の通り、AngularJSで使うガントチャートライブラリです。AngularJS自体がMVCフレームワークなので、hifiveとの組み合わせは想定していません。
インストール方法としては、bowerを使うのが簡単なようです。
bower install angular-gantt --save
またはCDNで配信されているものを使うこともできます。
<head> <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/> </head> <body> : <script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.js"></script> </body>
さらにプラグインを使う場合は、次のようにします。
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.css"/>
</head>
<body>
:
<script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.js"></script>
</body>
使い方
使い方は、まずAngular Appを生成する際に指定します。
// 基本はこちら
var myApp = angular.module('myApp', ['gantt']);
// プラグインを使う場合
var myApp = angular.module('myApp', ['gantt', 'gantt.table', 'gantt.movable', 'gantt.tooltips']);
そしてガントチャートを表示したい部分にgantt要素を指定します。
<!-- 基本はこちら -->
<div gantt data=data></div>
<!-- プラグインを使う場合 -->
<div gantt data=data>
<gantt-table></gantt-table>
<gantt-movable></gantt-movable>
<gantt-tooltips></gantt-tooltips>
</div>
後はデータをJSONオブジェクトで渡します。ここはAjaxを使って取得しても良いでしょう。
$scope.data = [
{name: 'row1', tasks: [
{name: 'task1', from: <date>, to: <date>},
{name: 'task2', from: <date>, to: <date>}
]
},
{name: 'row2', tasks: [
{name: 'task3', from: <date>, to: <date>},
{name: 'task4', from: <date>, to: <date>}
]
},
...
]
デモ
実際に表示した例は次のようになります。
表示方法など、多くのカスタマイズ項目があります。
タスクはドラッグ&ドロップで移動できます。
表示を週ごとにした場合。日付は非表示になります。
デモはAngular Gantt – Gantt chart component for AngularJS (Demo)にて試せます。
データフォーマット
データは基本的に行と呼ぶ配列に入ります。その中にタスクが複数入って管理されます。
行は次のようなJSONです。
{
name: "...", // 各行の左に出る名前
id: "...", // ユニークなID（オプション）
height: "..." // 高さ（オプション）
color: "..." , // 色（オプション）
classes: <Array|String>, // クラス。配列または文字列（オプション）
content: "...", // ラベルに使う文字（オプション）
tasks: [] // タスクを入れる配列
}
そしてタスクは次のようになります。
{
name: "...", // タスク名
from: <Date>, // 開始日。文字列、Dateオブジェクト、タイムスタンプなどが使えます
to: <Date>, // タスク終了日
id: "...", // ユニークなID（オプション）
color: "..." , // 色（オプション）
classes: <Array|String> // クラス。配列または文字列（オプション）
priority: <Number> // プライオリティ（オプション）
data: <Any> // 独自のカスタムデータを適用する場合（オプション）
content: "...", // ラベルに使う文字（オプション）
}
この内容で分かる通り、行とタスク名、日付以外はオプションばかりです。
プラグイン
執筆時点で用意されているプラグインは次の通りです。
Table
左側の固定表示列に任意のカラムを表示できるようになります。
Tree
タスクをグループごとに折りたたみできるツリー表示にします。テーブルと同時には使えないようです。
Groups
タスクを行の中に折りたたんだ時の表示をサポートします。Treeと一緒に使います。
Sortable
ソート機能を提供します。
Movable
タスクの移動、日付の変更をサポートします。
Draw Task
マウスで新しいタスクを作成します。
Tooltips
ツールチップ表示用です。
Bounds
タスクを移動した時に赤い枠表示を出すかどうか。
Progress
タスクの下にプログレスバーを出すかどうか。
Resize Sensor
レスポンシブWebデザイン用。
API
タスクを移動したり、削除したり、ラベルをクリックしたりした時にイベントがとれます。また、タスクの追加やフィルタも可能です。
スクロール
タスクが横、縦に長い場合はヘッダーや左側のタスクを残したままスクロールができるようになっています。
AngularJSを使ってWebシステムを構築しているのであればAngular Ganttを選択すると良さそうです。データフォーマットは分かりやすいですし、イベントも多いのでカスタマイズしやすいかと思います。
hifive開発者ブログ 
コメントは受け付けていません。