javascript/chart.js로 그래프 만들기

chart.js📊

: 8개의 차트 유형을 지원하는 데이터 시각화를 위한 오픈소스 JavaScript 라이브러리

 

https://www.chartjs.org/docs/latest/getting-started/

Getting Started | Chart.js

 

 

 

사용 방법

https://www.chartjs.org/docs/latest/getting-started/installation.html

Installation | Chart.js

 

사용방법에는 npm install chart.js으로 npm을 설치하는 방법과, cdn을 사용하는 방법이 있다. 나는 간단하게 cdn을 사용하고자 한다.

 

 <div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

 

나는 간단하게 cdn을 사용해봤고, 공식 홈페이지에 있는 예제를 가져와서 한번 확인해봤다.

 

const ctx = document.getElementById("myChart");

let myChart = new Chart(ctx, {
type: "bar",
data: {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
    label: "# of Votes",
	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: {
    y: {
      beginAtZero: true,
    },
  },
},
});

 

 

일단 차트의 속성들은 다음과 같다

 

type : 차트의 형태

지금은 'bar'라서 막대기 그래프로 보이지만, 그 외의 값으로는 'line', 'bubble', 'doughnut', 'polarArea', 'radar', 'scatter' 가 있는데 이를 변경해 그래프의 타입이 바뀌게 된다.

 

data : 말 그대로 데이터. 차트의 내용

• labels : 데이터의 항목들의 이름(축의 제목)
• datasets : 데이터의 속성
  • data : datasets의 값
  • labels : datasets의 이름(범례)
  • backgroundColor : 각 항목의 배경색
  • borderColor : 각 항목의 테두리색
  • borderWidth : dataset의 테두리 두께

options : 옵션

• scales : x, y축을 지정해줌
• beginAtZero : 말그대로 0에서부터 시작하냐는 의미. true라면 최소값과 관계 없이 y축의 범위가 0에서부터 시작된다.
  • 만약 값이 false라면 최소값인 purple의 값(2)를 기준으로 y축의 범위가 정해진다.
   

beginAtZero : false

 

 

그 외에도 여러가지 옵션이 있으며 자세한 사항은 공식 홈페이지에서 확인해보자