ChatGPT로 Chart.js 알아보기 (1): 소개 및 사용 방법

ChatGPT로 Chart.js 알아보기 (1):소개 및 사용 방법

최근 개인적으로 작업하고 있던 것이 있는데, Python으로 주식의 재무정보를 웹스크래핑한 다음에 해당 데이터를 시각화한 차트를 그리고 싶었다.
문득 아~~~주 예전에 Chart.js를 사용해 본 적이 있었는데, 아주 조금 사용해 보고 그 후로는 쓸 일이 없어서 잊고 지냈다.
이번에 근데 다시 사용해 봤는데 이참에 한번 좀 더 알아보고 싶은 마음이 생겼다.
이번에도 ChatGPT를 사용해서 공부해 볼 것이고, 해당 내용을 포스트로 정리해 보려 한다.
필자의 경우 ChatGPT를 이용해서 블로그 포스트를 작성하긴 하는 것이지만
매번 포스트를 작성할 때마다 내용을 정리하고 필요한 내용을 다시 찾아보고 하다 보니 나름대로 공부가 굉장히 잘 되는 편이라고 생각한다.
아무튼, 이번에는 Chart.js에 대해 한번 알아보자.
이번 포스트에서는 Chart.js의 간단한 소개와 장점, 사용방법 등에 대해서 작성해 보고자 한다.

Chart.js

Chart.js는 HTML5 기반의 JavaScript 라이브러리로,
각종 차트와 그래프를 캔버스 요소(canvas element)를 이용하여 웹 페이지에 그릴 수 있다.
이 라이브러리는 데이터를 시각적으로 표현하는 데 있어서 높은 유연성을 제공하며, 사용자 친화적인 인터페이스를 갖추고 있다.

기능과 장점

✔ 다양한 차트 유형

Chart.js는 막대 차트, 선 차트, 파이 차트, 레이더 차트, 버블 차트 등 다양한 차트 유형을 지원한다.

✔ 반응형 디자인

Chart.js는 브라우저 창 크기에 따라 자동으로 차트 크기를 조절하는 반응형 디자인을 지원한다.

✔ 높은 성능

Chart.js는 캔버스를 사용하여 그래픽을 렌더링하기 때문에, 높은 성능을 제공하며, 큰 데이터 세트도 빠르게 처리할 수 있다.

✔ 커스터마이징과 확장성

Chart.js는 차트의 색상, 레이블, 툴팁 등 많은 요소들을 사용자가 자유롭게 커스터마이징 할 수 있으며, 플러그인을 이용한 확장성 또한 뛰어나다.

✔ 크로스 브라우저 호환성

Chart.js는 모든 현대적인 웹 브라우저와 호환되며, 브라우저 간 일관성 있는 표현을 제공한다.

사용 방법

✔ CDN

Chart.js를 CDN으로 사용하려면 Chart.js 스크립트를 추가한 후, <canvas> 요소를 생성하여 차트를 그릴 공간을 할당한다.
그 다음, JavaScript를 사용하여 차트의 유형, 데이터, 옵션을 설정하면 된다.

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

<canvas id="myChart" width="400" height="200"></canvas>

var ctx = document.getElementById('myChart').getContext('2d');
var 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)'
            ]
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

위 코드를 실행시키면 아래와 같은 막대 차트를 생성한다.

✔ React

필자의 경우 NextJS, React를 개인적으로 공부하고 있는데,
React에서 Chart.js를 사용하는 방법에 대해서만 간략하게 알아보겠다.
우선 chart.js와 react-chartjs-2를 설치해야한다.

npm install chart.js react-chartjs-2

그 다음 컴포넌트를 생성한다. 여기서는 위와 동일한 막대 차트를 생성하는 BarChart 컴포넌트를 만들어 보겠다.
처음 이 샘플 코드를 실행할 때 이것저것 에러가 많이 발생했었는데, 아래처럼 ChartJS.register(...registerables)를 넣어주면 해결되었다.

// BarChart.js
import React from 'react';
import { Bar } from 'react-chartjs-2';
import { registerables, Chart as ChartJS } from 'chart.js';
ChartJS.register(...registerables);

const BarChart = () => {
    const 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,
            },
        ],
    };

    const options = {
        scales: {
            y: {
                beginAtZero: true,
            },
        },
    };

    return <Bar data={data} options={options} />
};

export default BarChart;

// App.js
import React from 'react';
import BarChart from './BarChart';

function App() {
  return (
    <div>
      <div style={{width: '600px', margin: '100px auto'}}>
        <h2>BarChart</h2>
        <BarChart/>
      </div>
    </div>
  );
}

export default App;

위 코드를 실행시키면 아래 이미지처럼 막대 차트를 생성한다.

React App

Chart.js는 그 직관적인 API와 뛰어난 성능으로 데이터 시각화에 있어 좋은 선택이 될 수 있다.
다양한 차트 유형과 커스터마이징 기능을 제공하며, 반응형 디자인으로 모든 디바이스에서도 잘 동작한다.
처음에는 여러 가지 옵션이 있고 플러그인이다 뭐다 알아야 할 것이 좀 많았는데, 계속 보고 계속 써보고 하다 보니 어느 순간 익숙해졌다.
물론 전부 다 외우기는 어려워서 아직 복붙도 하고, 찾아보고 해야 하지만 요즘은 또 ChatGPT 같은 생성형 AI가 많지 않은가?
필자가 ChatGPT에게 Chart.js를 사용해서 어떤 유형의 차트를 그리고 어떤 플러그인을 쓰고 명확하게 말해주면 대부분 다 잘 출력해 주었다.
사실 따로 공부를 안 해도 될 수준이긴 하지만, 개인적으론 AI가 아무리 다 작성 해준다고 해도 이 코드를 볼 줄은 알아야 한다고 생각한다.
그래서 공부를 더 해야겠다고 생각이 들었고, 이게 살아남는 방법이라고 개인적으로 생각한다.

이번 포스트에서는 Chart.js의 간단한 소개와 장점, 사용 방법에 대해서 알아보는 시간을 가졌다.
쉽게 사용할 수 있으니 차트가 필요하신 분들은 꼭 사용해 보는 것을 추천한다.

커피 한 잔으로
저를 응원해주세요!