コンテンツへスキップ
Tags

スクラッチで組み立てたい人向けのガントチャートライブラリ「Gantt-Chart」

by : 2017/06/22

今回は、D3.jsを利用したチャートライブラリGantt-Chartを紹介します。

Gantt-Chart概要

このガントチャートライブラリは、D3.jsをベースとしていますが、完全にそれをラップしていますので、D3そのものを学習する必要はありません。
学習コストも低く、描画部分をJavaScriptとCSSでできますので、ガントチャートをスクラッチで構築するならば、十分な選択技となるライブラリです。

GitHub: Gantt-Chart

とりあえず表示してみる

まずは単純なガントチャートを表示してみます。必要なライブラリとしてD3.jsが必要になります。

<body>
    http://./js/d3.v3.min.js
    http://./js/gantt-chart-d3.js
    http://./js/example1.js
</body>

example1.jsのソースコードです。

example();
function example() {

    var tasks = [
        {
            "startDate": new Date("2015/06/19 00:00:00"),
            "endDate": new Date("2015/06/23 00:00:00"),
            "taskName": "Task A",
            "status": "RUNNING"
        },
        {
            "startDate": new Date("2015/06/22 00:00:00"),
            "endDate": new Date("2015/06/27 00:00:00"),
            "taskName": "Task B",
            "status": "SUCCEEDED"
        }
    ];

    var taskNames = ["Task A", "Task B"];

    var format = "%m/%d";

    var gantt = d3.gantt().taskTypes(taskNames).tickFormat(format);
    gantt(tasks);

}

サンプル1の実行結果です。

サンプル1の実行結果
サンプル1の実行結果

データ記述方法

それでは、一つずつ、細かく見ていきます。まずはデータ記述方法を確認していきます。

データはオブジェクトの配列で設定します。オブジェクトには「startDate」「endDate」「taskName」「status」の4つだけと大変シンプルな構造になっています。

var tasks = [
    {
        "startDate": new Date("2015/06/19 00:00:00"),
        "endDate": new Date("2015/06/23 00:00:00"),
        "taskName": "Task A",
        "status": "RUNNING"
    }
];
startDate
日付をDateオブジェクトで設定します。
endDate
日付をDateオブジェクトで設定します。
taskName
Y軸のタスク名称を設定します。
status
そのグラフのステータスです。この名称はクラス名の参照にも使われます（後述）

Y軸のタスク名

タスク名称は、上記のデータオブジェクトにも記述しますが、並び順を決定するために、配列にて設定します。

var taskNames = ["Task A", "Task B"];

X軸の日付フォーマット

X軸のフォーマットはd3の日付フォーマットで記述します。以下に幾つか例を挙げます。

var format = "%m/%d"; // '06/10'
var format = "%m-%d"; // '06-10'
var format = "%H:%M"; // '12:30'

d3.jsの日付フォーマットはd3 Time Formattingを参照してください。

描画方法

最低限の描画は、次のように描画できます。taskTypesにY軸タスク名の配列、tickFormatにX軸日付フォーマットを設定します。最後に、データオブジェクトを渡せば描画されます。

var gantt = d3.gantt().taskTypes(taskNames).tickFormat(format);
gantt(tasks);

ステータス毎のスタイル設定

このライブラリで特徴的なものが、スタイルシートのクラス名の参照機能を持ち合わせていることです。これにより、tasksオブジェクトのstatusの値が、CSSのクラス名として参照されます。

以下はその記述方法です。

var tasks = [
    {
        …省略
        "status": "RUNNING"
    },
    {
        …省略
        "status": "SUCCEEDED"
    }
];

var taskStatus = {
    "SUCCEEDED": "bar",
    "FAILED": "bar-failed",
    "RUNNING": "bar-running",
    "KILLED": "bar-killed"
};

ganttのメソッドチェーンのtaskStatus()に、上記で設定したtaskStatusオブジェクトを引数として指定します。

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);

ステータスにCSSを指定した場合の実行結果です。

ステータスにCSSを指定した場合
ステータスにCSSを指定した場合

主なメソッド

既に気づいていると思いますが、このライブラリは、メソッドチェーンで各項目を設定できます。以下に主なメソッドを記載します。

メソッド 引数 概要
redraw なし 全体の再描画を行います。
width 数値（ピクセル） グラフの表示エリアの横幅を指定します。
height 数値（ピクセル） グラフの表示エリアの高さを指定します。
timeDomainMode “fit” or “fixed” fitで全期間を描画します。fixedはtimeDomainで指定した期間を描画します。
timeDomain Date配列[start, end] timeDomainModeがfixedの時に、その描画期間を指定します。

描画時の注意点

タスクを追加するなどのコントロールをするために redraw メソッドがありますが、データ全てを書き換えるので、大量のデータを書き換える場合は、描画パフォーマンスなどで考慮が必要になるでしょう。

また、日本語をそのまま利用すると文字化けしてしまうため、エンコードなどの工夫が必要になると思います。

あとがき

RESTなどでデータを外部から受信すれば、自由に取込んだり描画することができるでしょう。スクラッチでガントチャートを作成するならば、是非利用したいライブラリだと思います。

dk8996/Gantt-Chart

From → HTML5

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

«
»
%d人のブロガーが「いいね」をつけました。