웹 애니메이션 차트 chart.js 사용법

chart.js는 웹에서 애니메이션 차트를 그릴 수 있는 자바스크립트입니다. 파이썬 Flask를 이용하면 데이터가 변하는 것에 따라 동적인 차트를 그릴 수 있습니다. 잠깐 사용해봤지만, plotly보다 더 깔끔하고 움직임이 다양하다는 느낌을 받았습니다. 오늘은 웹 애니메이션 차트 chart.js 사용법에 대해서 알아보겠습니다.

 

 

1. chart.js javascript 넣기

head나 body에 아래 태그를 넣어줍니다.

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

 

2. chart를 넣고 싶은 위치에 태그 넣기

아래와 같이 div태그를 넣으면 뒤에서 javascript로 해당 위치에 차트에 대한 정보를 뿌립니다.

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

 

3. 차트 정보 넣기

차트 정보를 정의합니다.

<script>
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
  ];

  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45],
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {}
  };
</script>

 

4. 차트 그리기

2번에서 정의한 태그에 차트를 그려 줍니다.

<script>
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

 

차트 종류나 설정은 3번의 위치에서 정의할 수 있습니다. 애니메이션에 대한 옵션도 여러 가지가 있고 동일한 곳에서 설정합니다.

 

차트는 아래와 같은 타입의 차트를 그릴 수 있으니 참고하시기 바랍니다.

- 영역 차트
- 바 차트
- 버블 차트
- 도넛 & 파이 차트
- 라인 차트
- Polar Area 차트
- 레이터 차트
- 산점도

 

참고하시라고 html 파일을 아래 첨부합니다.

 

chartjs.html

0.00MB