概要

グラフ表示ライブラリ Plotly.js のラッパーコンポーネントである vue-plotly を使って時系列データをグラフに表示させます。

プロジェクトのセットアップ

VueCLI でプロジェクトを作成します。

vue create myproject
cd myproject

ライブラリのインストール

npm install vue-plotly

コンポーネントの作成

App.vue を編集します。

<template>
  <div id="app">
    <Plotly :data="data" :layout="layout" :display-mode-bar="false"></Plotly>
  </div>
</template>

<script>
import { Plotly } from "vue-plotly";

export default {
  name: "App",
  components: {
    Plotly,
  },
  data() {
    return {
      data: [
        {
          x: [
            "2013-10-04 22:23:00",
            "2013-10-04 22:26:00",
            "2013-10-04 22:29:00",
          ],
          y: [1, 3, 6],
          type: "scatter",
        },
      ],
      layout: {
        title: "My graph",
      },
    };
  },
};
</script>