mermaid.jsのガントチャート

この例は、mermaid.jsライブラリを使ってガントチャートを表示する方法を示します。

7行目：class="mermaid"を指定した<div>を描画領域として使用します。
28行目：各状態の最初と最後のレコードを抽出するFILTER_CHANGED() Since v8.0.15 を使用します。
46〜48行目：mermaidスクリプトを追加します。
56行目：startOnLoad:falseオプションでmermaid.jsを読み込みます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id=chart class="mermaid" style='width:800px;'></div>
    <script>
        function draw() {
            fetch('/db/tql', {
                method: "POST",
                body: `
                    FAKE(json({
                        ["Task-A", 1692329338, 1.0],
                        ["Task-A", 1692329339, 2.0],
                        ["Task-B", 1692329340, 3.0],
                        ["Task-B", 1692329341, 4.0],
                        ["Task-B", 1692329342, 5.0],
                        ["Task-B", 1692329343, 6.0],
                        ["Task-B", 1692329344, 7.0],
                        ["Task-B", 1692329345, 8.0],
                        ["Task-C", 1692329346, 9.0],
                        ["Task-D", 1692329347, 10],
                        ["Task-D", 1692329348, 11],
                        ["Task-D", 1692329349, 12]
                    }))
                    MAPVALUE(1, parseTime(value(1), "s"))
                    FILTER_CHANGED(value(0), useFirstWithLast(true))
                    GROUP(
                        by(value(0)),
                        first(timeUnix(value(1))),
                        last(timeUnix(value(1)) + 1)
                    )
                    MAPVALUE(1, parseTime(value(1), "s"))
                    MAPVALUE(2, parseTime(value(2), "s"))
                    MAPVALUE(2, timeUnix(value(2)) - timeUnix(value(1)))
                    JSON(timeformat("Default"), tz("Local"))`
            }).then(function(rsp){
                return rsp.json()
            }).then(function(obj) {
                let codes = Array(`gantt`)
                codes.push(`    title A Gantt Diagram`)
                codes.push(`    dateFormat YYYY-MM-DD HH:mm:ss`)
                codes.push(`    axisFormat %H:%M:%S`)
                codes.push(`    section Project`)
                obj.data.rows.forEach(rec =>{
                    codes.push(`         ${rec[0]} : task, ${rec[1]}, ${rec[2]}s`)
                })
                let element = document.querySelector("#chart");
                element.innerHTML = codes.join("\n")
                updateGantt()
            })
        }
    </script>
        <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: false });
        window.updateGantt = function() {
            mermaid.run();
        };
        draw();
    </script>
</body>
</html>

最終更新日 9月 10, 2026

Grid.jsを使ったWebアプリ HTTPのBinary列チュートリアル