概要

vuetify で v-sparkline を使うと簡単にグラフを描画できます
作業は vue-cli を使って進めます

環境

macOS 10.15.6
nodejs 14.5.0
yarn 1.22.4
vue cli 4.4.6
vuetify (vue-cli-plugin-vuetify) 2.0.7

vue プロジェクトの作成

vue create hello-world

エンターでデフォルトの設定で OK です
Formatter がほしい場合は手動で設定から行いましょう

vuetify の追加

cd hello-world
vue add vuetify

vuetify もデフォルト設定で進めて OK です

HelloWorld.vue にグラフを描画

vuetify を追加した際に作成される Vue コンポーネントを再利用します
とりあえずグラフを表示するだけのサンプルを記載します

vim src/components/HelloWorld.vue

<template>
  <v-container fluid>
    <v-sparkline
      :value="value"
      :gradient="gradient"
      :smooth="radius || false"
      :padding="padding"
      :line-width="lineWidth"
      :stroke-linecap="lineCap"
      :gradient-direction="gradientDirection"
      :fill="fill"
      :type="type"
      :auto-line-width="autoLineWidth"
      auto-draw
      :show-labels="showLabels"
      :label-size="labelSize"
    ></v-sparkline>
  </v-container>
</template>

<script>
const gradients = [
  ["#222"],
  ["#42b3f4"],
  ["red", "orange", "yellow"],
  ["purple", "violet"],
  ["#00c6ff", "#F0F", "#FF0"],
  ["#f72047", "#ffd200", "#1feaea"]
];

export default {
  data: () => ({
    showLabels: false,
    lineWidth: 2,
    labelSize: 7,
    radius: 10,
    padding: 8,
    lineCap: "round",
    gradient: gradients[5],
    value: [0, 2, 5, 9, 5, 10, 3, 5, -4, -10, 1, 8, 2, 9, 0],
    gradientDirection: "top",
    gradients,
    fill: false,
    type: "trend",
    autoLineWidth: false
  })
};
</script>

少し解説

v-sparkline に必要な属性 (value や gradient) などを設定します
サンプルではグラフの描画に必要なそれぞれの属性は script 内の data ですべて宣言しているのでそこの値を調整すればグラフの色や形を好きなように変更できます

重要なのは value でここにグラフに表示するデータの配列を設定します
その他の属性は見た目に関する属性がほとんどです
showLables や fill を true にしたりするとラバルが追加されたりグラフが色埋めされたりするのが確認できると思います

動作確認

yarn serve

最後に

vuetify の v-sparkline を使って二次元データを折れ線グラフにしてみました
vuetify では折れ線グラフしか書けないので他のグラフを描画したい場合は vue-charts など他のプラグインを使いましょう

参考サイト

https://vuetifyjs.com/ja/components/sparklines/

hawksnowlog

2020年7月29日水曜日

Vue.js で折れ線グラフを描画してみた (vuetify 編)

概要

環境