vue3에서 원시 chart.js를 사용하여 그래프 표시

vue-chartjs의 vue3 대응에 대해

슬프게도 vue-chartjs는 현재 vue3을 지원하지 않는 것 같습니다. (2021년 6월 시점)
지금은 시간이 걸리지 않는다는 것입니다.
htps : // 기주 b. 코 m / 아페르 트레 s / ゔ 에챠 rtjs / 이스에 s / 637
htps : // 기주 b. 코 m / 아페르 트레 s / ゔ 에챠 rtjs / 이스에 s / 661

전제

Chart.js 문서의 톱 페이지 에 있는 샘플을 재료로 해 움직입니다.

버전

chart.js: 3.3.2
vue: 3.0.0

설치

yarn add chart.js

코드

Chart.vue

<template>
    <canvas id="chart"></canvas>
</template>

<script>

//記事末尾で補足
import Chart from 'chart.js/auto';

export default {
  methods: {
    renderChart() {
      let ctx = document.getElementById("chart");
      new Chart(ctx, {
        type: 'line',
        data:{
          labels: ["赤", "青", "黄色", "緑", "紫", "橙"],
          datasets: [{
            label: '得票数',
            data: [12, 19, 3, 5, 2, 3],
            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
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero:true
              }
            }]
          }
        }
      });
    }
  },
  mounted() {
    this.renderChart();
  }
};
</script>

이런 느낌으로 user 해 줄 수 있습니다.

Sample.vue

<template>
  <div>
    <h2>chart sample</h2>
    <Chart></Chart>
  </div>
</template>

<script>
import Chart from '../components/Chart';

export default {
  components: {
    Chart,
  },
}
</script>

이런 느낌의 이미지가 됩니다.

보충

chart.js3에서는 사용하는 모듈을 등록해야하는 문서에 설명되어 있습니다.

Chart.js 3 is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.


아래와 같이 단순히 chart.js 뿐이라고 임포트하면 콘솔 에러가 나옵니다.
그래서 등록해 봅시다.

import { Chart } from 'chart.js';

Uncaught (in promise) Error: "linear"is not a registered scale.
Uncaught TypeError: Cannot read property 'left' of undefined

따라서 등록을 해 드리겠습니다. 1개 1개 필요한 것만을 등록 방법도 좋은 것 같습니다만, 문서에 기재되어 있는 짧은 등록 포맷을 사용하면 움직입니다.

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

또 상기를 1행으로 실행할 수 있는 다른 패스를 준비해 준다고 써 있습니다. 그것이 편하기 때문에, 이번은 그쪽의 쓰는 방법을 선택했습니다.

vue.js

import Chart from 'chart.js/auto';