ChatGPT로 Chart.js 알아보기 (2):new Chart

ChatGPT로 Chart.js 알아보기 (2):new Chart

이번 포스트에서는 Chart.js에서 가장 기본이 되는 Chart 객체의 각 매개변수들에 대해 알아 보고자 한다.
ChatGPT에게 Chart 객체에 대한 설명을 출력해달라고 했고, 그 내용을 정리해보았다.

Chart 생성

Chart.js에서 차트를 만들 때, 기본적으로 Chart 객체를 생성한다.
Chart 객체는 다음과 같이 생성할 수 있다.

const myChart = new Chart(context, config);

Chart 객체는 context와 config, 두 개의 매개변수를 받는다.

context 매개변수

context는 차트가 그려질 HTML 요소의 context를 나타낸다.
이것은 <canvas> 요소의 2D 렌더링 context이며, 차트를 그릴 때 필요한 메서드와 속성을 가지고 있다.
쉽게 말해서 차트가 그려질 위치를 정의하는 것이다.
HTML에서 <canvas> 요소를 만들고, JavaScript에서 이를 선택하여 2D context를 가져오는 코드는 아래와 같다.

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

const ctx = document.querySelect('#myChart').getContext('2d');

위의 예시에서 ctx 변수는 이제 차트를 그리는 데 사용할 2D context를 가지게 된다.
즉, 아래 처럼 context를 Chart 객체에 넣어주면 된다.

const ctx = document.querySelect('#myChart').getContext('2d');
const myChart = new Chart(ctx, confing);

config 매개변수

config 매개변수는 차트의 설정과 데이터를 지정하는 객체이다.
즉, 차트의 구성을 정의하는 객체인 것이다.
이 객체 내부에는 차트의 유형, 데이터, 옵션 등을 설정할 수 있다.

✔ type

type 속성은 차트의 종류를 지정한다. 예를 들면, 'line', 'bar', 'pie' 등이 있다.

type: 'bar'

차트 유형	설명
line	선 그래프
bar	막대 그래프
radar	레이더 그래프
doughnut	도넛 차트
pie	파이 차트
polarArea	극 영역 차트
bubble	버블 차트
scatter	산점도 차트

✔ data

data 속성은 차트에 표시될 데이터를 지정한다. 이 속성은 labels와 datasets라는 두 가지 하위 속성을 가진다.

data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
        label: 'Colors',
        data: [12, 19, 3],
        backgroundColor: ['red', 'blue', 'yellow']
    }]
}

속성	타입	설명
labels	배열	x축에 표시될 레이블의 배열
datasets	배열	차트에 표시될 데이터 세트들의 배열. 각 데이터 세트는 객체로 표현되며, 여러 속성을 가질 수 있다.

datasets의 속성

속성	타입	설명
label	문자열	데이터 세트의 레이블로, 레전드에 표시된다.
data	배열	차트에 표시될 실제 데이터 값들의 배열.
backgroundColor	문자열 또는 배열	차트 요소들의 배경색을 설정한. 개별 색상을 지정하거나 여러 색상의 배열을 사용할 수 있다.
borderColor	문자열 또는 배열	차트 요소들의 테두리 색상을 설정한다.
borderWidth	숫자 또는 배열	차트 요소들의 테두리 두께를 설정한다.
hoverBackgroundColor	문자열 또는 배열	차트 요소에 마우스를 올렸을 때의 배경색을 설정한다.
hoverBorderColor	문자열 또는 배열	차트 요소에 마우스를 올렸을 때의 테두리 색상을 설정한다.
hoverBorderWidth	숫자 또는 배열	차트 요소에 마우스를 올렸을 때의 테두리 두께를 설정한다.
tension	숫자	선 차트에서 곡선의 긴장도를 설정한다. 0은 직선을 의미하고, 높은 값은 더 곡선적인 선을 만든다.
fill	불린 또는 문자열	선 아래 영역을 채울지 여부를 설정한다. 기본값은 'start'로 선 아래 영역을 채운다.

✔ options

options 속성은 차트의 다양한 옵션들을 설정할 수 있다. 축, 레전드, 툴팁 등의 설정을 지정할 수 있다.

options: {
    scales: {
        y: {
            beginAtZero: true
        }
    }
}

속성	타입	설명
responsive	불린	차트가 컨테이너 크기에 반응하여 자동으로 크기를 조절하는지 여부를 설정한다.
maintainAspectRatio	불린	차트 크기가 변경될 때 원래의 종횡비를 유지할지 여부를 설정한다.
scales	객체	축의 설정을 담은 객체. x, y 축의 스케일을 커스터마이징할 수 있다.
legend	객체	범례(legend)의 표시와 관련된 설정을 담은 객체.
title	객체	차트의 제목과 관련된 설정을 담은 객체.
tooltips	객체	툴팁과 관련된 설정을 담은 객체. 툴팁은 차트 요소에 마우스를 올렸을 때 나타나는 작은 상자이다.
hover	객체	차트 요소에 마우스를 올렸을 때의 상호작용과 관련된 설정을 담은 객체.
animation	객체	차트의 애니메이션과 관련된 설정을 담은 객체.
plugins	객체	플러그인과 관련된 설정을 담은 객체. Chart.js에는 여러 플러그인을 사용하여 기능을 확장할 수 있다.
layout	객체	차트의 레이아웃과 관련된 설정을 담은 객체.

Example

다음은 위 내용을 참고해서 만든 Chart 객체를 만드는 예시 코드이다.

✔ Bar Chart

<div style="max-width: 500px;">
    <canvas id="myChart"></canvas>
</div>

const ctx = document.querySelector('#myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: 'Colors',
            data: [12, 19, 3],
            backgroundColor: ['red', 'blue', 'yellow']
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

✔ Pie Chart

<div style="max-width: 500px;">
    <canvas id="myPieChart"></canvas>
</div>

const pieCtx = document.querySelector('#myPieChart').getContext('2d');
const myPieChart = new Chart(pieCtx, {
    type: 'pie',
    data: {
        labels: ['A', 'B', 'C', 'D', 'E', 'F'],
        datasets: [{
            label: 'Votes',
            data: [30, 10, 20, 5, 15, 20],
            backgroundColor: ['#98DDCA', '#8B2635', '#0066CC', '#16A085', '#FFC300', '#2C3E50']
        }]
    }
});

Chart.js로 Chart를 생성할 때 기본적으로 사용되는 매개변수들에 대해 알아보는 시간을 가졌다.
옵션들이 너무 많아서 다 알아가기에는 시간이 좀 필요하겠지만,
요즘은 생성형 AI를 통해 빠르게 샘플 코드를 받아내서 확인해 볼 수 있으니 학습하기에 너무 좋은 것 같다.
필자도 이번 포스트를 작성하면서 Chart 객체의 구성에 대해 많이 공부할 수 있었다.
다음 포스트부터는 각 차트 type에 대해서 한번 알아보겠다.

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