데이터 시각화 - Chart.js 라이브러리

 

 

 

 

라이브러리 소개

데이터 시각화를 제공하는 무료 라이브러리  📊

다양한 모양(막대바, 선, 동그란 도넛모양 ..등)을 손쉽게 나타내줄 수 있다.

 

 

📃 Chart.js 공식 문서 보기

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

라이브러리 사용

 

 

chart.js 설치하기

npm install chart.js

 

 

 

 

 

예시 및 설명

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

 

 

 

 

 

 

 

기본 옵션을 변경하고싶다면

Chart.js 공식 문서의 좌측 General, Configuration, Chart Types 메뉴에 각각에 대한 세부 옵션들을 확인할 수 있다.

 

 

참고로 상단 네비바 우측에 있는 "Sample" 버튼을 누르면 다양한 예시와 코드를 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

참고문서

Chart.js | Chart.js (chartjs.org)

Chart.js | Chart.js

https://pinokio0702.tistory.com/388

[Chart.js] Vue에서 사용하기.

https://blog.naver.com/PostView.naver?blogId=gngh0101&logNo=221087428594&parentCategoryNo=&categoryNo=26&viewDate=&isShowPopularPosts=true&from=search

Chart.js 사용 방법, 예제 소스 쉽게 이해하기

https://ming9mon.tistory.com/108

chart.js 크기 조정 / 사이즈 조정

​