utamaro’s blog

誰かの役に立つ情報を発信するブログ

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.jssnap-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;
    /* ↑ 進行度のバーがトマト色になります */
}

一番下のタスクと横スクロールの距離が離れすぎている問題

最新版(v0.3.0)を使ってみたところ、一番下のタスクと横スクロールの距離が離れすぎている問題がありました。

これはissueにも載っていたのでもしかしたら対応されるかもしれません。

https://github.com/frappe/gantt/issues/91

解決方法としては、この問題が起きないバージョンを使用することです。

私の場合は、デモページでサンプルを検証ツールで確認して、使用されているライブラリをそのままコピーしました。

https://frappe.io/gantt

(問題が起きないバージョンをcheckoutでたどるより早いと判断しました。)