【vue-chart.js】時間軸の線グラフのサンプル、及び描画設定を動的な変更

# 概要
以下、Vue.js用にchart.jsをラッパーした[vue-chart.js](https://vue-chartjs.org/)の話です。
`vue-chart.js`でデータ取得後の設定変更をしたかったときのメモです。
線グラフ、横軸が時間、で作成したのでそのサンプルになるかもしれません。

# 対応したいこと
- 縦軸を%、横軸を時間、とする線グラフを描画する
- データの想定は20秒ごとの使用率1時間分
- 取得したデータの最大値を基にy軸のデータ区切り間隔を変更する

# 時間軸グラフ

```TimeLineChart.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  data () {
    return {
     options: {
       responsive: true,
       maintainAspectRatio: false,
       titile: {
         display: true, 
         text: "使用率" 
       },
       tooltips: {
         mode: 'index', 
         intersect: "false" 
       },
       scales:{
         xAxes:[{
           display: true, 
           scaleLabel:{
             display: false,
             labelString: 'Time',
           },
           type: 'time',
           autoSkip: false,
           time:{
             unit: 'second',
             unitSize: 600,
             displayFormats: {seconds: 'HH:mm:ss'},
             tooltipFormat: 'HH:mm:ss',
           },
         }],
         yAxes:[{
           display: true, 
           scaleLabel:{
             display: false,
             labelString: 'Value',
           },
           autoSkip: true,
           ticks:{
             min: 0,
           },
         }],
       }
     }
   }  
 },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
```
時間軸に関しては`xAxes`部分が肝になります。
各設定項目の詳細は公式の[軸関連](https://www.chartjs.org/docs/master/axes/index)や[時間関連](https://www.chartjs.org/docs/master/axes/cartesian/time/)をご確認いただいた方がいいかと思いますが、。

- ` type: 'time'`で時間軸であることを指定
- `unit: 'second'`で時間軸の単位を秒であることを指定
- `unitSize: 600`で描画する間隔を指定。unitをsecondで指定しているので600秒=10分刻み
- `displayFormats: {seconds: 'HH:mm:ss'}`でx軸に表示するメモリのフォーマットを指定

上記4項目により、線グラフのx軸が10分刻みの時間軸描画がされます。
ちなみに、y軸が使用率ということで`ticks:{min: 0,}`で最小値を指定しています。

また、vue側でチャートの軽量サンプルは以下のようになるでしょうか。

```MyChart.vue
<template>
  <div class="small">
    <time-line-chart :chart-data="datacollection"></time-line-chart>
  </div>
</template>

<script>
  import TimeLineChart from './TimeLineChart.js'

  export default {
    components: {
      TimeLineChart
    },
    data () {
      return {
        datacollection: null
      }
    },
    methods: {
      getData () {
        this.datacollection = {
          labels: //20行刻みのタイムスタンプデータ配列
          datasets: [
            {
              label: 'ラベル名',
              data: [ 0, 1 , 2 ...] //y軸データ配列
            }
          ]
        }
      },
    //その他メソッド省略
    }
  }
</script>
```

# 描画設定を動的な変更
動的な変更と書くと大げさで、最初に記載した通り

- 得したデータの最大値を基にy軸のデータ区切り間隔を変更する

をやるだけです。今回はTimeLineChart.js側で対処します。


```TimeLineChart2.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
 //TimeLineChart.jsと中身まったく同じなので省略
 },
  mounted () {
    const dataArray =[]
    for(let array of this.chartData.datasets){
      dataArray.push(Math.max(...array.data))
    }
    const maxValue = Math.max(...dataArray)
    this.options.scales.yAxes[0]ticks.stepSize = Math.round(maxValue / 5)
    this.renderChart(this.chartData, this.options)
  }
}
```
`reactiveProp`をmixinしているのでデータが更新される度にmounted ()に到達する。
従って、更新されたthis.chartDataを基にthis.optionsへ各種オプションを更新することができる。
今回の場合、線グラフで複数本のラインがある前提で記載している。
dataArrayに各ラインの最大値をまとめたあと、それらのうちの最大値を5分割した値を`this.options.scales.yAxes[0]ticks.stepSize`に渡している。
`this.options.scales.yAxes[0]ticks.stepSize`はy軸に表示するメモリの数値幅で、これを設定しないとy軸が見えづらいケースがある。
数値幅以外もthis.optionsが持つ設定値は逐次更新可能。ただし描画速度とトレードオフなので注意されたし。