Nuxt.jsでvue-chart.jsを使って簡単グラフ作成

Nuxt.jsで簡易的でいいのですぐにグラフを描写したいという時はvue-chartjsがおすすめです。vue-chartjsを利用すればすぐにグラフを作成することができます。動作確認の棒グラフなら数分で作成できます。

JSONファイルからの情報取得やプラグインを利用した設定などについてもシンプルなコードを使って説明を行なっています。

vue-chartjsのインストール

※Nuxt.jsの環境は構築済みという前提で進めます。

npmコマンドを利用してvue-chart.jsとchart.jsパッケージをインストールします。vue-chart.jsとchart.jsの2つをインストールする必要があります。

$ npm install vue-chartjs chart.js --save

Barグラフの設定

コンポーネントを作成

インストールが完了したら棒グラフを描写するコンポーネントを作成します。名前はBarChart.vueとします。

<script>
import { Bar } from 'vue-chartjs'
export default {
  extends: Bar,
  data(){
    return {
        chartdata: {
            labels: ['January', 'February'],
            datasets: [
                {
                label: ['Data One'],
                backgroundColor: '#f87979',
                data: [40, 30]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}
</script>

初めてvue-chartjsを利用する人で気になる点は下記の5つです。

これでコンポーネントの作成は完了です。

作成したコンポーネントを利用する

別のファイルから作成したBarChart.vueをimportしてtemplateタグにBarChartタグを追加します。

<template>
  <div>
    <h1>vue-chartjsで棒グラフ</h1>
    <BarChart />
  </div>
</template>

<script>
import BarChart from '@/components/BarChart.vue'

export default {
  components: {
    BarChart
  }
}
</script>

これでグラフの設定は完了です。グラフは表示されましたが、1つの棒ブラフが表示されているがもう一つは？となってしまいそうですが、縦軸が30から始まっているので隠れていないだけです。

棒の数をもっと増やしたいという場合は簡単です。labelsを増やして、それに対応するdataの配列を増やせば完了です。

chartdata: {
    labels: ['January', 'February','March','April'],
    datasets: [
        {
        label: ['Data One'],
        backgroundColor: '#f87979',
        data: [40, 30, 10, 25]
        }
    ]
}

数分でグラフの描写することができました。グラフを描写することができたので次はコンポーネントを再利用できるようにpropsを使って設定を行います。

propsを使ってデータを渡す

これはpropsを利用したデータの渡し方を知っているかどうかなのでvue-chartjsとはあまり関係ありませんが確認しておきます。

コンポーネントのBarChart.vueがこんなにも短い記述になりました。

<script>
import { Bar } from 'vue-chartjs'
export default {
  extends: Bar,
  props:['chartdata', 'options'],
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}
</script>

BarChart.vueにデータを渡す側にdataとoptionsを追加します。

<template>
  <div>
    <h1>vue-chartjsで棒グラフ</h1>
    <BarChart :chartdata="chartdata" :options="options" />
  </div>
</template>

<script>
import BarChart from '@/components/BarChart.vue'

export default {
  components: {
    BarChart
  },
  data(){
    return {
        chartdata: {
            labels: ['January', 'February'],
            datasets: [
                {
                label: ['Data One'],
                backgroundColor: '#f87979',
                data: [40, 30]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    }
  },
}
</script>

結果は同じです。

propsを配列ではなくデータタイプやデフォルトを設定しておくことも可能です。

  props: {
  	chartdata: {
      type: Object,
  	},
  	options: {
      type: Object,
      default:() => ({
        responsive: true,
        maintainAspectRatio: false
      })
  	}
  },

JSONファイルからデータを取得したい

JSONファイルに保存したデータを取り出しそのデータを使ってグラフを描写したいという要望もあるかと思います。その場合も簡単に対応することができます。

JSONファイルを保存する場所をまず決めてください。今回はdataディレクトリを作成しその下にbar.jsonファイルを作成します。

{
    "data": [
        {
            "month": "January",
            "sale": "25" 
        },
        {
            "month": "Febuary",
            "sale": "40" 
        },
        {
            "month": "March",
            "sale": "18" 
        }
    ]
}

bar.jsonファイルをimportを利用して取得しmap関数で展開を行い、labelとdataに設定を行います。

import BarChart from '@/components/BarChart.vue'
import Data from '@/data/bar.json'

export default {
  components: {
    BarChart
  },
  data(){
    return {
      chartdata: {
          labels: Data.data.map(data => data.month),
          datasets: [
              {
              label: ['Data One'],
              backgroundColor: '#f87979',
              data: Data.data.map(data => data.sale)
              }
          ]
      }
    }
  },
}

このようにJSONファイルに保存したデータでもグラフ化することが可能です。

プラグインを利用したグラフ作成

Nuxt.jsのプラグインを作成してグラフを描写することも可能です。プラグインの中でVue.componentを利用してコンポーネントを利用することで登録したコンポーネントをどこでも利用することができます。

実際に動作確認してどこでも使えるという意味を確認していきます。

pluginsディレクトリにvue-chartjs.jsファイルを作成します。pluginsディレクトリはnuxt.jsのプロジェクトを作成した時に作成されているディレクトリです。

vue-chartjs.jsファイルの中で下記のようにコンポーネント名BarChartでコンポーネントの登録を行なっています。記述している内容はこれまでとかわりません。

import Vue from 'vue'
import { Bar } from 'vue-chartjs'

Vue.component('BarChart', {
  extends: Bar,
  props: {
  	chartdata: {
      type: Object,
  	},
  	options: {
      type: Object,
      default:() => ({
        responsive: true,
        maintainAspectRatio: false
      })
  	}
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
})

次にnuxt.jの設定ファイルであるnuxt.config.jsファイルで作成したプラグインの設定を行います。

  plugins: [
    { src: '@/plugins/vue-chartjs.js', ssr: true },
  ],

以上でプラグインの設定は完了です。

次は登録したコンポーネントを利用します。BarChartコンポーネントをimportせずそのまま利用することができます。コメントアウトしているのは使用しなくてもよくなったコードです。

// import BarChart from '@/components/BarChart.vue'
import Data from '@/data/bar.json'

export default {
  // components: {
  //   BarChart
  // },
  data(){
    return {
      chartdata: {
          labels: Data.data.map(data => data.month),
          datasets: [
              {
              label: ['Data One'],
              backgroundColor: '#f87979',
              data: Data.data.map(data => data.sale)
              }
          ]
      }
    }
  },
}

ブラウザで確認すると先程までと同様にグラフを確認することができます。