vue-chartjs馴れ初め

vue-chartjsを使い始めようと思ったけど日本語文献少なかったりで大変だったのでとりあえずnuxtjsでサンプルのグラフを出すところまで記載。

参考にした情報

node_modules/vue-chartjs/src/examplesの中に公式のサンプルグラフの書き方が一式入っているので基本それを参考にしました。

表示手順

install

npm install vue-chartjs chart.js --save

component作成

componentsディレクトリにHorizontalBarChart.vueを作成

HorizontalBarChart.vue

<script>
import { HorizontalBar } from 'vue-chartjs'

export default {
  extends: HorizontalBar,
  mounted() {
    this.renderChart(
      {
        labels: [
          'January',
          'February',
          'March',
          'April',
          'May',
          'June',
          'July',
          'August',
          'September',
          'October',
          'November',
          'December'
        ],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
          }
        ]
      },
      {
        responsive: true,
        maintainAspectRatio: false
      }
    )
  }
}
</script>

component配置

pages/index.vueに配置

index.vue

<template>
  <div>
    <chart-component />
  </div>
</template>

<script>
import Vue from 'vue'
import HorizontalBarChart from '~/components/HorizontalBarChart'

export default {
  components: {
    HorizontalBarChart
  }
}

Vue.component('chart-component', HorizontalBarChart)
</script>

ブラウザ

でました。

感想

使ってみると結構オサレで簡単そうですね。