Chart.jsをNuxt.jsで使って時間の折線を作ったので個人的にメモした

ほんと適当ですみません。

Install

$ npm install vue-chartjs@2 chart.js@2

なんかこのバージョンじゃないとだめだった。よくわかんないけど両方2にした。
vue-chartjsの導入を忘れないこと。

$ npm install @nuxtjs/moment

時間の管理しやすさのためにMoment.jsを。入らなくてもいいかも。

$ npm install core-js   

Core-jsが要求された。よくわかんないけどいれといた。ここら辺詳しい人いたらご教授お願いします。

ほかにもbabel-runtimeとかも要求されたような気がした。いろいろ試してたから正解かはわからない。

Import

Moment.jsの準備

nuxt.config.js

  buildModules: [
    '@nuxt/typescript-build',
+   '@nuxtjs/moment',
  ],
+ moment: {
+   locales: ['ja']
+ },

chart.js

ExampleChart.vue

 <script>
+  import { Line } from 'vue-chartjs';]
   // 中略
 </script>

Lineを指定しているため、折線のみがインポートされる。他のグラフを使いたい時はそれも追加する。

実装

ExampleChart.vue

<script>
import { Line } from 'vue-chartjs';
import moment from 'moment'

export default {
  extends: Line,
  name: 'chart',
  data () {
    return {
      startTime: '9:30', // X軸の開始時間
      endTime: '13:15',  // X軸の終了時間
      datasetA: /* Yデータ（一次元配列） */
    }
  },
  mounted () {
    this.renderChart({
        datasets: [{
          label: 'データA',
          data: this.generateLables('09:30','13:15', this.datasetA),
          fill: true,
          borderColor: '#0058FF',              // ここらへんはプロットの設定
          pointBackgroundColor: 'transparent',
          pointBorderColor: 'transparent',
          backgroundColor: '#D1E6FA',
          tension: 0.03,　 // ベジェ曲線っぽくできる
          yAxisID: "event" // Y軸が複数ある場合はIDを指定してあげる
        }]
      }, {
        responsive: true, // 自動で描画ON
        maintainAspectRatio: false,
        legend: {
          display: false // 凡例OFF（個人的に嫌い）
        },
        scales: {
            xAxes: [{
              //　ここで軸を時間を設定する
              type: 'time',
              time: {
                  parser: 'HH:mm', // パースの仕方（HHは24時間表記ということ）
                  unit: 'minute',  // 年、月、日、時間、分、秒のどれを指標とするか
                  stepSize: 15,    // 15分ごとにする
                  displayFormats: {
                      'minute': 'HH:mm' // 表示の仕方を指定
                  }
              },
              // X軸の範囲を指定
              ticks: {
                  min: this.startTime, // 開始
                  max: this.endTime    // 終了
              }
            }],
            yAxes: [{
	      // Y軸の設定（今回は比表示）
              position: "left", // どこに置くか
              display: false,   // 表示するか
              id: 'event',      // Y軸が複数ある場合はIDをつける
              type: 'linear',
              ticks: {
                max: 50,
                min: 0,
              }
            }]
        }
      })
  },
  methods: {
    generateLables(start, end, dataset) {
      var startMoment = moment(start,'H:mm')
      console.log("start:" +startMoment.format('H:mm'))
      var res = []
      var i = 0
      while(true) {
        res.push({t: startMoment.format('H:mm'), y: dataset[i]})
        if (startMoment.format('H:mm') == end) break;
        startMoment.add(5, 'm')
        i++
      }
      return res;
    }
  }
}
</script>

generateLables()について

ほんらいはlabelsでXの値を指定するんですがそれだと分かりにくいのでデータセット内にXの値を入れています。

datasets: [{
  data: [{x:60, y:'9:15'}, {x:57, y:'9:30'}, {x:90, y:'10:30'}]
}]

こんな感じですかね。今回は一定間隔（5分間隔）でyを設定してますがばらばらでも大丈夫です。その場合当然、上のxAxesを適応するとX軸の目盛りは15分ごとのままデータのプロット場所はばらばらになります。

さいごに

Chart.jsは設定項目の多さゆえに結構難しいと思いましたね。そのかわり、下のような綺麗なグラフができました。（データはランダムですが）