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); } }