frappe-ganttを使ってガントチャートを作成する方法

ガントチャートを作成するライブラリは多くありますが、今回紹介するのはfrappe-ganttというライブラリです。

github.com

↓のようなチャートを作成できます。

f:id:miyaji-y26:20181004191444p:plain

残念ながら、マウス操作でタスクを追加することはできません。自分で実装することはできそうなので挑戦しても良いかもしれません。

使用方法

まずはソースコードをダウンロードします。

https://github.com/frappe/gantt/archive/master.zip

使用するファイルは以下のファイルです。(css以外使いません。)

dist/frappe-gantt.css

次に、デモページを開きます。

そこから、frappe-gantt.min.jsをコピーしてきます。

2018/10/04からファイルに変更がなければ↓から取得できるはずです。

(https://frappe.io/gantt/js/frappe-gantt.min.js)

コピーする理由はv0.3.0に不具合があるためです。眼の前の動いているものを使ったほうが安全です。

frappe-ganttはmoment.jsとsnap-svgに依存性を持っているので、両方ダウンロードします。

http://momentjs.com/

http://snapsvg.io/

コーディング

↓のディレクトリ構造を作成します。

sample
├── frappe-gantt.min.js
├── index.css  ⇠ 自分で作成する
├── index.html  ⇠ 自分で作成する
├── index.js  ⇠ 自分で作成する
├── moment.js
└── snap.svg-min.js

あとはコードを書くだけです。

index.html

#ganttがチャート追加の対象です。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Simple Gantt</title>
        <link rel="stylesheet" href="../dist/frappe-gantt.css" />
        <link rel="stylesheet" href="./index.css" />
    </head>
    <body>
        <div class="container">
            <svg id="gantt"></svg>
        </div>
        <script src="./moment.js"></script>
        <script src="./snap.svg-min.js"></script>
        <script src="./fg.min.js"></script>
        <script src="./index.js"></script>
    </body>
</html>

index.js

サンプルのタスクを画面に追加して、クリックイベントをつけています。

(function() {
    var tasks = [
        {
            start: '2018-10-01',
            end: '2018-10-08',
            name: 'Redesign website',
            id: "Task 0",
            progress: 20
        },
        {
            start: '2018-10-03',
            end: '2018-10-06',
            name: 'Write new content',
            id: "Task 1",
            progress: 5,
            dependencies: 'Task 0'
        },
        {
            start: '2018-10-04',
            end: '2018-10-08',
            name: 'Apply new styles',
            id: "Task 2",
            progress: 10,
            dependencies: 'Task 1'
        },
    ]
    function init() {
        var gantt_chart = new Gantt("#gantt", tasks, {
            on_click: function (task) {
                console.log(task);
            },
            on_date_change: function(task, start, end) {
                console.log(task, start, end);
            },
            on_progress_change: function(task, progress) {
                console.log(task, progress);
            },
            on_view_change: function(mode) {
                console.log(mode);
            },
            view_mode: 'Month',
            language: 'en'
        });
        console.log(gantt_chart);
    }

    document.addEventListener("DOMContentLoaded", function() {
        console.log("start application.");
        init();
    }, false);
})()

index.css

デモと同じような見た目で表示されるようにします。

body {
    font-family: sans-serif;
    background: #eee;
}
.container {
    width: 80%;
    margin: 0 auto;
    overflow: auto;
    border: 1px solid #d8d8d8;
    background-color: #fff;
}

/* custom frappe-gant class */
.gantt .bar-progress {
    fill: tomato !important;
    /* ↑ 進行度のバーがトマト色になります */
}