1. 라이브러리 소개
데이터 시각화를 제공하는 무료 라이브러리 📊
다양한 모양(막대바, 선, 동그란 도넛모양 ..등)을 손쉽게 나타내줄 수 있다.
2. 라이브러리 사용
2.1. chart.js 설치하기
<bash />npm install chart.js
2.2. 예시 및 설명
<html />
<template>
<div>
<!--
Chart.js 사용해보기 예시
사실 <canvas id="myChart"></canvas> 태그만 있어도 되지만,
브라우저 크기에 따라 사이즈가 바뀌게하려면 다음과 같이 부모 태그가 필요 !
(그리고 64-68 라인에 기재된 options 설정들 responsive, maintainAspectRatio, aspectRatio까지 필요)
-->
<div style="position: relative; width: 80%; height: 500px; margin: auto">
<canvas id="myChart"></canvas>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import Chart from "chart.js/auto";
/*
======================================= >
페이지가 로딩되면, myChart 라는 ID를 가진 태그에
config 라는 내용으로 차트를 표시해준다
*/
onMounted(() => {
new Chart(
document.getElementById("myChart")
, config
)
});
/*
======================================= >
차트에 표시될때 모양, 내용들을 이 곳에서 관리 (작성/수정) 해주기
설정 내용들을 차례대로 설명해보자면 다음과 같다.
type 종류는 line , radar , bar , bubble , doughnut , pie , polarArea 중에서 사용 가능하다.
labels은 datasets안에 있는 data 값의 순서대로 이름을 매칭해준다. (차트 하단에 데이터의 이름 표시)
datasets: label의 값은 차트 위에 나올 이름이고
배열형태로 작성된 data는 말 그대로 화면에 표시될 데이터들이다.
그외 64-68 라인까지의 options 내용은 크기 조절을 위한 설정들로 되어있다.
*/
const config = {
type: "line",
data: {
labels: ["데이터1", "데이터2", "데이터3", "데이터4", "데이터5", "데이터6"],
datasets: [
{
label: "데이터 목록명",
data: [12, 19, 3, 5, 2, 3],
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
aspectRatio: 2,
},
};
</script>
2.3. 기본 옵션을 변경하고싶다면
Chart.js 공식 문서의 좌측 General, Configuration, Chart Types 메뉴에 각각에 대한 세부 옵션들을 확인할 수 있다.
참고로 상단 네비바 우측에 있는 "Sample" 버튼을 누르면 다양한 예시와 코드를 확인할 수 있다.
3. 참고문서
Chart.js | Chart.js (chartjs.org)
Chart.js | Chart.js
Chart.js Welcome to Chart.js! Why Chart.js Among many charting libraries (opens new window) for JavaScript application developers, Chart.js is currently the most popular one according to GitHub stars (opens new window) (~60,000) and npm downloads (opens ne
www.chartjs.org
https://pinokio0702.tistory.com/388
[Chart.js] Vue에서 사용하기.
안녕하세요. 회사에서 외주로 맡겼던 제품코드를 보면서, Chart.js라는 라이브러리를 처음 접하게 되었습니다. 기존에는 apex chart를 제품에 사용하고 있었습니다만, chart.js 또한, 커스텀이 광범위
pinokio0702.tistory.com
Chart.js 사용 방법, 예제 소스 쉽게 이해하기
Chart.js 사용 방법, 예제 소스 쉽게 이해하기 Chart.js 는 HTML5 Canvas 방식의 강력한 오픈...
blog.naver.com
https://ming9mon.tistory.com/108
chart.js 크기 조정 / 사이즈 조정
chart.js 샘플을 가져와 실행시켜보면 엄청 크다 ... 그래서 chart의 크기를 변경하는 방법을 찾아보았다. 1. chart.js 정적 크기 우선 chart를 그려줄 canvas태그를 넣어주고 원하는 높이와 넓이를 설정해
ming9mon.tistory.com
'💻 FullStack > Vue.js' 카테고리의 다른 글
| Vue 시작일과 종료일로 진행률(%) 표시하기 (0) | 2023.09.19 |
|---|---|
| Vue CSS height 속성 값에 % 사용해보기 (1) | 2023.09.14 |
| Composition API 방식에서 refs를 쓰고싶다면 (0) | 2023.09.12 |
| Vue.js 코드 작성할 수 있는 사이트 소개 (Playground) (0) | 2023.08.21 |
| Composition API 방식에서 emit, props를 쓰고싶다면 (0) | 2023.08.12 |