[Nuxt] Nuxtを使ってグラフ（vue-chart.js）をインタラクティブに操作してみた

#1 はじめに
vue-chart.jsを使ってグラフをインタラクティブに操作することをやってみたので，その概要です．完成目標は下記の感じのようになります．

参考：
https://qiita.com/Sa2Knight/items/fe9cf2373e5c73a3a678

#2 インストール
今回使うモジュールをインストールします．*私はNuxtを使っているが別にVueのみを使ってもできるので，そっちがいい場合はそれにしてください．ちなみに，vuetifyを利用．

npx npx create-nuxt-app [プロジェクト名]

このコマンドを打つと色々聞かれると思いますが，各自適当に入力してください．

 npm install  chart.js vue-chartjs --dev

グラフを描くためのモジュールをインストールします．

#3　実装

3.1 グラフの実装

この記事で使うグラフはレーダーチャートを使います．特に理由もないので，これは好きなように変えてください．
最初に行うことはこのレーダーチャートをグローバルコンポーネントで利用できるようにすることです．nuxtではこれをpluginsで書くことで可能になります．単一のVueではmain.jsで記述すれば大丈夫かと思います．

plugins/chart/rader.js

import Vue from "vue";
import { Radar, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;

Vue.component("rader-chart", {
  extends: Radar,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
});

グローバルにするにはnuxtのconfigを修正する必要があります．

nuxt.config.js

  plugins: [
    {
      src: "@/plugins/chart/rader.js",
      //ssr:false この部分は記述してもどっちでもいい
    }
  ],

以上でグローバルで適用可能となります．

3.2　テンプレートの実装

lauout/default.vue

<template>
  <v-app>
    <v-row class="ma-auto">
      <v-col md="6">
        <div class="rader">
          <rader-chart :chart-data="chartData" :options="{}"></rader-chart>
          <div>
            <v-row>
              <v-col md="6" v-for="(n,idx) in 6">
                <v-subheader class="pl-0">{{sliderHeaderTexts[idx]}}</v-subheader>
                <v-slider v-model="data[idx]" thumb-label="always" step="0.01" :max="1" :min="0"></v-slider>
              </v-col>
            </v-row>
          </div>
        </div>
      </v-col>
    </v-row>
  </v-app>
</template>

• rader-chartでグローバルにグラフを適用
• v-sliderで値を変更 thumb-labelで値を可視化 v-rowで横に二つ並ぶ

続いて，script

lauout/default.vue

<style scoped>
.rader {
  width: 400px;
  max-height: 300px;
}
</style>
<script>
export default {
  data() {
    return {
      chartData: {
        labels: ["数学", "古典", "現代", "英語", "政治", "統計"],
        datasets: [
          {
            label: "hoge",
            data: [0.1, 0.2, 0, 0.5, 0.1, 0.4],
            borderWidth: 1
          }
        ]
      },
      data: [0.1, 0.2, 0, 0.5, 0.1, 0.4],
      sliderHeaderTexts: ["数学", "古典", "現代", "英語", "政治", "統計"]
    };
  },
  watch: {
    data() {
      this.updateChartData();
    }
  },

  methods: {
    updateChartData() {
      const newChartData = Object.assign({}, this.chartData);
      newChartData.datasets[0].data.forEach((value, idx) => {
        // 変更がある場合
        if (value !== this.data[idx])
          newChartData.datasets[0].data[idx] = this.data[idx];
      });

      this.chartData = newChartData;
    }
  }
};
</script>

• watchでsliderの値の変更を監視．変更点はリストにすることで変数一個一個を監視可能
• chartDataの中身は変更があった値を代入

以上です．

#4 終わりに
今回はnuxtを使ってrader-chartをインタラクティブに操作する方法についての記事を書きました．少し首を傾げるところはforEach文の変更があった場所のみを代入するところでした．この適用事例はrader-chartだけでなく，他のグラフでも適用可能だと思うのでぜひやってみてください！！！