30
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「plotly.js」で時系列折れ線グラフを作成してみる

Last updated at Posted at 2023-12-11

plotly.jsを使用する機会があったので時系列折れ線グラフ作成までの手順を紹介します。

plotly.jsとは

Plotly.jsは、データ可視化のための強力なJavaScriptライブラリであり、Webベースのインタラクティブなグラフやチャートを作成するために利用されます。このライブラリは、豊富な機能を提供し、多様なグラフやカスタマイズオプションを備えています。Plotly.jsを用いることで、データを効果的に表現し、ユーザーがグラフを探索したり分析したりすることが可能となります。

公式:plotly.jsの公式ドキュメント

インストール

bash
npm install react-plotly.js plotly.js plotly.js-basic-dist

or

bash
yarn add react-plotly.js plotly.js plotly.js-basic-dist

グラフの作成

グラフはインストールしたPlotlyコンポーネントにdataを渡すだけで作成できます!

plotly.tsx
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);

const MyPlot = (): JSX.Element => {
    const trace1 = {
        x: [1, 2, 3, 4],
        y: [10, 15, 13, 17],
        // 今回は折れ線グラフを作成できる"lenes"を指定します
        type: "lines",
    };

    const data = [trace1] as Plotly.Data[];
    const layout = {
        width: 800,
        height: 400,
    } as Plotly.Layout;

    return (
        <Plot
            data={data}
            layout={layout}
        >
    )
};

スクリーンショット 2023-12-05 15.51.29.png

データの複数表示

plotly.tsx
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);

const MyPlot = (): JSX.Element => {
    const trace1 = {
        x: [1, 2, 3, 4],
        y: [10, 15, 13, 17],
        type: "lines",
    };

    const trace2 = {
        x: [4, 3, 2, 1],
        y: [12, 14, 17, 11],
        type: "lines",
    };

    // データを複数用意し、配列で渡す
    const data = [trace1, trace2] as Plotly.Data[];
    const layout = {
        width: 800,
        height: 400,
    } as Plotly.Layout;

    return (
        <Plot
            data={data}
            layout={layout}
        >
    )
};

スクリーンショット 2023-12-05 16.06.41.png

レイアウトの調整

plotlyで用意されているプロパティでレイアウトを調整していきます。

// まずはデータを整える
const mens = {
    //時系列風にするためにx軸の値に日付を指定
    x: ["2023/1", "2023/2", "2023/3", "2023/4"],
    y: [10, 15, 13, 17],
    name: "",
    type: "lines",
};

const women = {
    x: ["2023/1", "2023/3", "2023/5", "2023/7"],
    y: [12, 14, 17, 11],
    name: "",
    type: "lines",
};

const data = [mens, women] as Plotly.Data[];

スクリーンショット 2023-12-05 16.29.55.png

凡例の位置を変更

凡例を水平方向に表示したいためlegendプロパティのorientationプロパティに"h"を指定。
デフォルトで"v"が指定されています。
「vertical」の「v」と「horizontal」の「h」かな??

const layout = {
    // ...省略
    legend: {
        orientation: "h",
    },
}

スクリーンショット 2023-12-05 16.45.57.png

マーカーのカスタマイズ(折れ線)

マーカーのポイントはクリックが可能なのでクリックしやすいように大きさ等を設定していきます。

const men = {
    // ...省略
    marker: {
        // 線の色
        color: "bleu",
        line: {
            // 枠線の色
            color: "#fff",
            // 線の太さ
            width: 1,
        },
        // ポイントの大きさ
        size: 14,
    },
}

const women = {
    // ...省略
    marker: {
        color: "red",
        line: {
            color: "#fff",
            width: 1,
        },
        size: 14,
    },
}

スクリーンショット 2023-12-05 17.02.55.png

y軸の固定

渡すデータによって初期表示のズーム比率が変わるため(今回の場合は最低値の10と最大値の17の範囲)y軸の表示を0から20の範囲で固定します。

const layout = {
    // ...省略
    yaxis: {
        range: [0, 20],
    },
}

スクリーンショット 2023-12-05 17.45.24.png

モートバーのカスタマイズ

最後にモートバーの不要な機能を削除して・・・・

{
    // ...省略
    const config = {
        // モートバーを常に表示する
        displayModeBar: true,
        // plotlyのロゴを削除
        displaylogo: false,
        // 必要な機能のみ下記に追加する
        modeBarButtons: [
            // 配列を分けることでアイコン同士の間隔をあけることができます
            ["zoom2d", "pan2d"],
            ["zoomIn2d", "zoomOut2d", "autoScale2d", "resetViews"],
        ],
    } as Plotly.Config;
    
    return (
            // コンポーネントにconfigを渡す
        <Plot config={config} data={data} layout={layout} />
    );
};

完成

スクリーンショット 2023-12-05 18.03.44.png

シンプルで見やすいグラフができたと思います!(多分(-_-;))

最終的なコード

plotly.tsx
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);

const MyPlot = (): JSX.Element => {
    const mens = {
        x: ["2023/1", "2023/2", "2023/3", "2023/4"],
        y: [10, 15, 13, 17],
        name: "",
        type: "lines",
        marker: {
            color: "blue",
            line: {
                color: "#fff",
                width: 1,
            },
            size: 14,
        },
        hovertemplate: "%{x}   %{y}",
    };

    const women = {
        x: ["2023/1", "2023/3", "2023/5", "2023/7"],
        y: [12, 14, 17, 11],
        name: "",
        type: "lines",
        marker: {
            color: "red",
            line: {
                color: "#fff",
                width: 1,
            },
            size: 14,
        },
    };

    const data = [mens, women] as Plotly.Data[];
    
    const layout = {
        width: 900,
        height: 400,
        legend: {
            orientation: "h",
        },
        yaxis: {
            range: [0, 20],
        },
    } as Plotly.Layout;

    const config = {
        displayModeBar: true,
        displaylogo: false,
        modeBarButtons: [
            ["zoom2d", "pan2d"],
            ["zoomIn2d", "zoomOut2d", "autoScale2d", "resetViews"],
        ],
    } as Plotly.Config;

    return (
        <Plot config={config} data={data} layout={layout} />
    );
};

最後に

plotly.jsを使用して時系列折れ線グラフを作成してみました。
今回は時系列の折れ線グラフに焦点を当てて紹介しましたが、まだまだ紹介できてないレイアウトの設定や3Dグラフなどさまざまな種類のグラフを作成できるので、ぜひ色々カスタマイズして遊んでみてください!!

PR

HRBrainでは一緒に働く仲間を募集しています!
Advent Calendarを見ていただき、興味を持っていただいた方はぜひ弊社の採用ページをご確認ください!

30
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?