utamaro’s blog

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

frappe-ganttでグラフを更新する方法

frappe-ganttのドキュメントからチャートの更新apiを探してみたのですが、見つけられませんでした。

issueを見てみたところ、解決策が見つかったので紹介します。

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

jsfiddleにコードを公開してくださっているのでリンクを載せます。

https://jsfiddle.net/stvkas/jgtygxro/14/

コーディング

refresh関数を使用すると良いみたいです。

ボタンを押すと、ランダムなタスクが追加されます。

html

<!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">
            <!-- <h2>Interactive Gantt Chart entirely made in SVG!</h2> -->
            <svg id="gantt"></svg>
        </div>
        <button id="add-task">Add Tasks</button>

        <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>

javascript

function dinamic() {
    var names = [
        ["Redesign website", [0, 7]],
        ["Write new content", [1, 4]],
        ["Apply new styles", [3, 6]],
        ["Review", [7, 7]],
        ["Deploy", [8, 9]],
        ["Go Live!", [10, 10]]
    ];
        
    var tasks = names.map(function(name, i) {
        var today = new Date();
        var start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
        var end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
        start.setDate(today.getDate() + name[1][0]);
        end.setDate(today.getDate() + name[1][1]);
        return {
            start: start,
            end: end,
            name: name[0],
            id: "Task " + i,
            progress: parseInt(Math.random() * 100, 10)
        }
    });
        
    tasks[1].progress = 0;
    tasks[1].dependencies = "Task 0";
    tasks[2].dependencies = "Task 1";
    tasks[3].dependencies = "Task 2";
    tasks[5].dependencies = "Task 4";
    tasks[5].custom_class = "bar-milestone";
    
    var gantt_chart = Gantt('#gantt', tasks);
    
    document.getElementById('add-task').addEventListener('click', function() {
        var task = RandomTask('Task 5');
        tasks.push(task);
        gantt_chart.refresh(tasks);
    });
    
    function RandomTask(deps) {
        var start = new Date();
        start.setDate(start.getDate() + 11 + randomInt(2));
        
        var end = new Date();
        end.setDate(start.getDate() + randomInt(7));
            
        return {
            start: start,
            end: end,
            name: 'Party',
            id: 'Task ' + tasks.length,
            progress: randomInt(100),
            dependencies: deps
        };
    
    }
        
    function randomInt(limit) {
        return Math.floor(Math.random() * limit);
    }
}