Chart.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>

generate Lables 정보()

원래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의 설정 항목이 많아서 어려워요.반대로 아래의 아름다운 도표를 만들었다.(데이터는 무작위)