コンテンツへスキップ
Tags

,

使いやすいガントチャートを探そう（1）「Angular Gantt」

by : 2015/04/07

企業の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を選択すると良さそうです。データフォーマットは分かりやすいですし、イベントも多いのでカスタマイズしやすいかと思います。

Angular Gantt – Gantt chart component for AngularJS

デモ

angular-gantt/angular-gantt

From → HTML5

コメントは受け付けていません。

«
»