도넛 차트 플러그인(vue3)

좋은 플러그인이 있어 사용법을 소개한다.

https://github.com/mazipan/vue-doughnut-chart

우선 다운로드 해준다.

npm i vue-doughnut-chart

컴포넌트를 사용하기 위해 다음의 코드를 원하는 vue 파일에서 작성한다.

<template>
<DoughnutChart/>
</template>
<script>
import DoughnutChart from '../../node_modules/vue-doughnut-chart/src/DoughnutChart.vue'

export default {
  components: {
    DoughnutChart
  }
}
</script>

여기까지 하면 sass 관련 설치가 안되어 있어 오류가 난다.

npm i sass-loader
npm i node-sass

두 가지를 설치해준다.

그런데 만약 TypeError: this.getOptions is not a function in vue.js 이런 메시지가 나오면서 오류가 뜬다면 다음의 방법으로 해결할 수 있다.

npm uninstall sass-loader
npm i sass-loader@10.1.0 --save

sass-loader의 버전을 10.1.0으로 낮춰서 해결한 것.

참고: https://github.com/webpack-contrib/sass-loader/issues/923

만약 Node Sass version 5.0.0 is incompatible with ^4.0.0. 같은 메시지가 나오면서 오류가 뜬다면 다음의 방법으로 해결할 수 있다.

npm uninstall node-sass
npm install node-sass@4.14.0

역시 6.xx인 node-sass의 버전을 4.xx로 낮춰주는 방법이다.

참고: https://guswnl0610.github.io/react/react-sass-error/

원하는 형태로 만든 결과는 아래와 같다. 정말 좋은 플러그인인듯..

도넛 안에 퍼센테이지 나옴 + 500ms동안 퍼센테이지가 채워진다.

<template>
<!-- https://github.com/mazipan/vue-doughnut-chart props는 이곳 참조 -->
<DoughnutChart :percent="50" foregroundColor="#ff4e7e" visibleValue="true" valueCountUp="true"/>
</template>
<script>
import DoughnutChart from '../../node_modules/vue-doughnut-chart/src/DoughnutChart.vue'

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