More than 5 years have passed since last update.

[JavaScript] plotly.jsで時刻を表示する線の出し方を考えてみた件

Last updated at 2019-07-27Posted at 2019-07-27

概要

　シミュレーションを行っているときに統計結果を表示していたのだが、一目でシミュレーション中のデータがどこなのか表示したかった。しかし調べてみてもなかなかいい感じのものがなかったので、考えてみた。

使用ツール等

plotly.js
- ver 1.49.0

コード

　説明するより先にコードと動いている例を見てもらおうと思う。

html

<!DOCTYPE html>
<html>
<head>
    <title>plotly.jsで時刻を表示する線の出し方を考えてみた件</title>
    <meta charset="UTF-8">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="./main.js"></script>
</head>
<body>
    <div id="graph" style="height: 400px; width: 100%"></div>
</body>
</html>

javascript

window.onload = (e) => {
    /* グラフを表示 */
    let id = 'graph';
    let data = [
        /* グラフデータ */
        {
            x: [0, 1, 2, 3, 4, 5],
            y: [10, 30, 60, 40, 50, 70],
            type: 'line'
        },
        /* 時間を表す線の初期データ */
        {
            x: [0, 0],
            y: [10, 70],
            type: 'line'
        }
    ];
    let layout = {};
    Plotly.newPlot(id, data, layout);
    /* 1秒ごとに時間を表す線を移動させる */
    let i = 0;
    setInterval((e) => {
        /* データを更新する */
        i += 0.5;
        if (i > 5) {
            i = 0;
        }
        // data[1] = {...} の場合、凡例で非表示にしても1秒後に表示されしまうので注意
        data[1].x = [i, i];
        /* updateを行い反映させる */
        Plotly.update(id, data, layout);
    }, 1000);
};

動作例

See the Pen WVoZYm by P488 (@P488) on CodePen.

コードの解説

グラフを表示する時に、グラフのデータに加えて線のデータを追加する。
この時のxの値は開始位置、yの値はグラフの最大と最小を指定する。

let data = [
    /* グラフデータ */
    {
        x: [0, 1, 2, 3, 4, 5],
        y: [10, 30, 60, 40, 50, 70],
        type: 'line'
    },
    /* 時間を表す線の初期データ */
    {
        x: [0, 0],
        y: [10, 70],
        type: 'line'
    }
];

setIntervalを使用してx軸の値を変化させ、あたかも動いているように見せる。

/* 1秒ごとに時間を表す線を移動させる */
let i = 0;
setInterval((e) => {
    /* データを更新する */
    i += 0.5;
    if (i > 5) {
        i = 0;
    }
    // data[1] = {...} とした場合、凡例で非表示にしてもupdateで再表示されしまうので注意
    data[1].x = [i, i];
    /* updateを行い反映させる */
    Plotly.update(id, data, layout);
}, 1000);

終わりに

今回掲載したコードは掲載用に作成したコードなので、穴があると思うが容赦して貰いたい。今後もPlotlyを使用してもらえた思う次第...

何かあったらコメントください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up