vue-chartjs와 chart.js를 이용하여 도넛차트를 그려보겠습니다.
(vue 2 버전, chart.js: 3.5.0, vue-chartjs: 3.5.1 버전 사용)
1. vue-chartjs, chart.js 다운로드
npm install chart.js
npm install vue-chartjs chart.js --save
2. 도넛차트 개발 문서(3.5.0 version)
https://www.chartjs.org/docs/3.5.0/charts/doughnut.html
Doughnut and Pie Charts | Chart.js
Doughnut and Pie Charts Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. They are excellent at showing the relational proportions
www.chartjs.org
3. 도넛차트 구현
3-1. global.js
import { Chart, registerables } from "chart.js";
Chart.register(...registerables);
- 여러 차트와 공유할 수 있는 파일을 global.js로 만들었습니다.
3-2. doughnutChart.js
import "@/utils/charts/global";
import { Doughnut } from "~/vue-chartjs-3.5.1/src/index";
export default {
extends: Doughnut,
props: ["chartData", "options"],
mounted() {
this.renderChart(this.chartData, this.options);
}
};
- 저는 vue-chartjs를 외부 파일로 넣어서 사용했습니다.
- vue 파일에서 설정한 데이터와 옵션을 가지고 차트를 그리는 코드입니다.
3-3. DoughnutChart.vue
<template>
<div id="doughnut-chart">
<div class="box">
<div class="title">과일 선호도 조사</div>
<div class="chart">
<doughnut-chart
ref="fruitChart"
:chartData="chart.data"
:options="chart.options"
id="chart"
></doughnut-chart>
</div>
</div>
</div>
</template>
import DoughnutChart from "~/doughnutChart.js";
export default {
name: "doughnut-chart",
type: "doughnut",
components: {
DoughnutChart
},
data() {
return {
chart: {
data: {
labels: ["딸기", "자두", "수박", "복숭아", "메론", "망고"],
datasets: [
{
backgroundColor: [
"#A684B7",
"#DD7445",
"#DE9D11",
"#E0D295",
"#B1D166",
"#78BAA1"
],
borderColor: "#eee",
hoverBorderColor: "#eee",
data: [50, 30, 20, 40, 60, 10]
}
]
},
options: {
plugins: {
legend: {
display: true,
position: "left",
labels: {
boxWidth: 8,
padding: 10,
usePointStyle: true,
pointStyle: "circle",
font: {
size: 14
}
},
fullSize: true,
align: "center"
},
tooltip: {
boxWidth: 15,
bodyFont: {
size: 14
}
}
},
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
top: 50,
bottom: 50
}
},
elements: {
arc: {
borderWidth: 2;
}
},
animation: {
duration: 5000
}
}
}
};
}
- 위 코드의 옵션들에 대한 설명은 2번 링크를 이용하면 볼 수 있습니다.
- 보여지는 데이터는 시계로 따졌을 때 12시부터 순차적으로 보여집니다.
4. 결과 화면

이상으로 뷰에서 Chart.js를 사용하여 도넛차트를 그려보았습니다.
'Web Developer's Story > VUE.js' 카테고리의 다른 글
[Vue.js] virtual keyboard - Simple-keyboard 사용법 (1) | 2022.01.05 |
---|---|
[Vue.js] Chart.js Line Chart 그리기 (0) | 2021.12.28 |
[Vue.js] Chart.js Doughnut Chart labels outside with line (0) | 2021.11.03 |
[Vue.js] Chart.js Doughnut Chart 그림자 넣기 (0) | 2021.09.13 |
[Vue.js] 뷰 프레임워크 기본개념 및 환경설정 (0) | 2021.09.07 |