vue-chartjsでグラフを描く

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

# インストール

https://vue-chartjs.org/ja/

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

```
yarn add vue-chartjs chart.js
```

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

https://www.chartjs.org/docs/latest/

# グラフ描画

グラフ描画は簡単です。データを定義、もしくは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>
```

<img width="652" alt="スクリーンショット 2019-07-12 14.57.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123511/d8ac32e1-0bf9-afb9-ec67-ccf51d1dee59.png">

# 注意点

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

# 描画できるグラフの種類

https://www.chartjs.org/docs/latest/charts/

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

# パラメータいくつか

#### labelString

https://www.chartjs.org/docs/latest/axes/labelling.html

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

#### stepSize

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size

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

#### lineTension

https://www.chartjs.org/docs/latest/charts/line.html#line-styling

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

##### lineTension = 0

<img width="646" alt="スクリーンショット 2019-07-12 14.15.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123511/eb39f804-f78a-7701-73c4-4e13d0dadaa6.png">

##### lineTension = 0.4

<img width="644" alt="スクリーンショット 2019-07-12 14.17.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123511/c7c29199-f900-8c5c-deba-ccc0ff39c064.png">

##### lineTension = 0.8

<img width="649" alt="スクリーンショット 2019-07-12 14.17.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123511/64ea4b97-ed2f-6846-bed8-807306043303.png">

# まとめ

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

# 参考URL

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