plotly.jsを使用して簡単にグラフを作成しよう!!

今回はVue.jsとplotly.jsを使用してグラフを作成する方法をご紹介します。

はじめにplotly.jsとはd3.jsとstack.glライブラリを使用したグラフ作成ライブラリとなります。
また、2Dのみならず、Mapや3D Chartなどの作成も可能です。

Plotly JavaScript Open Source Graphing Library

今回はJavaScriptで作成しますが、PlotlyはPython・R用のライブラリがあり、それらの言語でも利用することが可能です。

plotly.com

では早速作成してみましょう。

■ Vue.js環境の構築

Vue.jsの環境構築方法は他のサイトでも丁寧な説明があるかと思いますので省略します。
ただ、Vue.js + Nuxt.jsで環境を構築したい場合は、下記URLを参照して構築することをおすすめします。

※ UIフレームワークとしてVuetifyを使用しています。
※ モードはシングルページアプリケーション（SPA）を選択してください。

https://ja.nuxtjs.org/guide/installation/

■ plotly.jsのインストール

plotly.jsをインストールします。

npm i plotly.js-basic-dist

https://www.npmjs.com/package/plotly.js-basic-dist

■ plotly.jsの作成

では早速、作成します。
下記、ファイルをテキストエディタで開いてください。

<プロジェクト名>\pages\index.vue

そのあとに下記ソースを上書きし、保存します。

<template>
  <div>
    <v-flex>
      <v-card>
        <v-card-title>Event Cost</v-card-title>
        <div id="slc"></div>
      </v-card>
    </v-flex>
  </div>
</template>

<script>
import Plotly from 'plotly.js-basic-dist'

export default {
  mounted() {
    let money = {
      x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      y: [10000, 21000, 15000, 35000, 20000, 40000, 33000, 55000, 28000, 12000, 46000, 9000],
      name: '金額',
      hovertext: "",
      hovertemplate: "%{y:.f}円<extra></extra>",
      type: 'scatter',
      mode: 'lines+markers',
      line: {
        color: '#ff1493'
      }
    };

    let times = {
      x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      y: [7, 2, 3, 2, 4, 5, 1, 3, 4, 6, 3, 3],
      name: '回数',
      hovertemplate: "%{y}回",
      type: 'bar',
      yaxis: 'y2',
      width: 0.5,
      marker: {
        color: '#90ee90'
      }
    };

    const layout = {
      hovermode:'closest',
      title: 'Event Cost',
      xaxis: {
        tickmode: "linear",
        tick0: 1,
        dtick: 1,
      },
      yaxis: {
        title: '金 額',
        overlaying: 'y2',
        tickformat: ".f"
      },
      yaxis2: {
        title: '回 数',
        side: 'right'
      }
    };

    const config = {
      responsive: true,
      displaylogo: false,
      //displayModeBar: false,
      toImageButtonOptions: {
        format: 'svg',
        filename: 'event_cost',
        scale: 1
      },
      modeBarButtonsToAdd: [
        {
          name: 'Download CSV',
          icon: Plotly.Icons.disk,
          click() {
            alert("Make download process!!")
          }
        }
      ]
    }

    Plotly.newPlot('slc', [money, times], layout, config)

    let slcPlot = document.getElementById('slc')
    slcPlot.on('plotly_hover', function(data){
      console.log("Hover Point X:" + data.points[0].x)
    })
  }
}
</script>

■ plotly.jsの確認

プロジェクトに移動後、下記コマンドを実行しサーバを起動します。

npm run dev

起動し終えたらブラウザで「http://192.168.61.147:3000」に遷移します。

ブラウザに以下の画面が表示されれば成功です。

■ plotly.jsの説明

今回のソースコードは皆様がこんなことができたら便利だと思うのではないかという機能を入れてみました。
主な機能は下記となります。

折れ線グラフにマーカーを追加
折れ線グラフと棒グラフの混在
y軸ラベルを左右に表示
マウスオーバー時のツールチップのフォーマットを修正
「Download plot」のフォーマットをSVGに変更
CSVダウンロードのアイコン追加
ラベルフォーマットの修正
色、サイズの変更
x軸のラベル表示を修正
Plotlyロゴの削除
グラフをマウスオーバーした時のイベントを取得

■ 最後に

以上でplotly.jsを使用したグラフ作成は完了です。
また、要望などあれば他のグラフ作成にも挑戦したいと思います。

からくりブログ

株式会社からくり社員のブログです