search
LoginSignup
9

More than 3 years have passed since last update.

posted at

updated at

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>

ブラウザ

スクリーンショット 2018-12-21 2.00.31.png

でました。

感想

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
9