vue-chartjsでグラフを描く

13199 ワード
chart.js Vue.js vue-chartjs Vue.js テキストリンク

Vue.jsで使えるグラフ描画ライブラリはいくつかありますが、有名なのはどれもChart.jsのラッパーライブラリとなっています。
今回はその中でも多機能なvue-chartjsを使ってみることにしました。

インストール

インストールはvue-chartjsの他にChart.jsも必要です。

yarn add vue-chartjs chart.js

vue-chartjsの公式ドキュメントには、Vue.jsで使うための必要最低限の情報しかないため、
グラフについて詳しく知りたい場合はChart.jsの公式ドキュメントを調べましょう。

グラフ描画

グラフ描画は簡単です。データを定義、もしくはAPIで取得するなどしてrenderChart()するだけ。

Chart.vue
<script>
import { Bar } from 'vue-chartjs';

export default {
  extends: Bar,
  name: 'chart',
  data () {
    return {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
          {
            label: 'Bar Dataset',
            data: [10, 20, 30, 40, 50, 30],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          },
          {
            label: 'Line Dataset',
            data: [10, 50, 20, 30, 30, 40],
            borderColor: '#CFD8DC',
            fill: false,
            type: 'line',
            lineTension: 0.3,
          }
        ]
      },
      options: {
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Month'
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              stepSize: 10,
            }
          }]
        }
      }
    }
  },
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>
Index.vue
<template>
  <div>
    <h1>棒グラフと線グラフ</h1>
    <chart></chart>
  </div>
</template>

<script>
import Chart from './Chart';

export default {
  components: {
    Chart,
  },
}
</script>

注意点

公式ドキュメントにも書かれていますが、renderChart()に渡されるoptionsはリアクティブでないことです。

描画できるグラフの種類

コンポーネント名 グラフ名
Line 折れ線グラフ
Bar or HorizontalBar 棒グラフ
Radar レーダーチャート
Pie or Doughnut 円グラフ
PolarArea 鶏頭図
Bubble バブルチャート
Scatter 散布図

パラメータいくつか

labelString

グラフの目盛りの名称を表示します。デフォルトでは表示されません。

stepSize

グラフの目盛り間隔は指定されていないと自動でよろしくやってくれます。便利。

lineTension

折れ線グラフにおける、線の曲線具合を設定するパラメータです。
0で直線、所謂折れ線グラフになります。数字を増やしていくに従って、より曲がりくねったベジェ曲線でグラフが描かれます。

lineTension = 0

lineTension = 0.4

lineTension = 0.8

まとめ

使いやすいです。
だいたいのことはChart.jsの公式ドキュメントを読めば、出来ること出来ないことがわかると思います。
以上、快適なインフォグラフィック生活を〜

参考URL

https://vue-chartjs.org/ja/
https://www.chartjs.org/docs/latest/
https://www.webprofessional.jp/creating-beautiful-charts-vue-chart-js/