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

概要

以下、Vue.js用にchart.jsをラッパーしたvue-chart.jsの話です。
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部分が肝になります。
各設定項目の詳細は公式の軸関連や時間関連をご確認いただいた方がいいかと思いますが、。

• 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が持つ設定値は逐次更新可能。ただし描画速度とトレードオフなので注意されたし。