ChatGPT로 Chart.js 알아보기 (3):막대 차트(Bar Chart)

ChatGPT로 Chart.js 알아보기 (3):막대 차트(Bar Chart)

이번 포스트에서는 Chart.js로 막대 차트(Bar chart)를 생성하는 방법에 대해서 알아보고자 한다.
ChatGPT에게 막대 차트를 생성하는 방법 및 활용법에 대해 내용을 출력해달라 하고 그 내용을 정리했다.
막대 차트는 데이터 시각화에서 가장 기본적인 형태이고 가장 많이 사용되는 차트이다.
막대 차트가 무엇인지부터 해서 Chart.js로 만드는 방법까지 천천히 알아보자.

막대 차트/막대 그래프(Bar chart)란?

막대 차트는 데이터를 직사각형 막대의 길이나 높이로 표현하는 그래픽 방법이다. 각 막대는 특정 카테고리나 그룹을 나타내며,
막대의 길이나 높이는 해당 카테고리의 수량, 빈도, 크기 등을 나타낼 수 있다.

✔ 수직 막대 차트 (Vertical Bar Chart)
막대들이 수직으로 표시되며, y축은 일반적으로 수량이나 크기를 나타내고, x축은 카테고리를 나타낸다.

✔ 수평 막대 차트 (Horizontal Bar Chart)
막대들이 수평으로 표시되며, x축은 수량이나 크기를 나타내고, y축은 카테고리를 나타낸다.

✔ 주요 용도

• 카테고리별 비교
  서로 다른 카테고리의 값을 비교하는데 유용하다.
  예를 들어, 각 상품의 월별 판매량을 비교하는 경우에 막대 차트를 사용할 수 있다.
• 시간 경과에 따른 변화
  시간의 흐름에 따라 값이 어떻게 변하는지 보여줄 때 사용된다.
  예를 들어, 한 해 동안 매월별로 회사의 수익을 나타내는데 막대 차트를 사용할 수 있습니다.
• 데이터 분포 확인
  데이터의 분포와 패턴을 시각적으로 확인하는데 도움을 준다.

막대 차트는 데이터를 직관적으로 이해할 수 있게 해주며, 간단한 비교를 통해 인사이트를 얻을 수 있도록 돕는다.
하지만 막대 차트를 사용할 때 주의할 점은 너무 많은 카테고리를 포함시키지 않고, 데이터를 명확하게 전달할 수 있도록 하는 것이 중요하다.

수직 막대 차트 (Vertical Bar Chart)

수직 막대 차트는 Chart 객체에 type을 bar로 설정하면 된다.

type: 'bar'

그럼 샘플 코드를 보면서 알아보자.

const ctx = document.querySelector('#myBarChart').getContext('2d');
const myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Color 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
            }
        }
    }
});

위 코드는 6가지 색상에 대한 투표 결과를 막대 차트로 보여준다.
샘플 코드에서 사용된 옵션들에 대해서 간단하게 설명하자면,

1. data: 차트에 표시될 데이터를 정의하는 객체

- labels: x축에 표시될 라벨을 배열로 정의한다.
- datasets: 차트에 표시될 데이터 셋들을 배열로 정의한다. 각 데이터 셋은 객체로 표현된다.

· label: 데이터셋의 레이블로, 범례에 표시된다.
· data: y축에 표시될 값들을 배열로 정의한다.
· backgroundColor: 각 막대의 배경색을 정의한다. 이 배열은 각 막대에 적용된다.
배열이 아닌 1개의 배경색을 선언하는 경우 모든 막대가 동일한 색상을 가진다.
· borderColor: 각 막대의 테두리 색을 정의한다.
· borderWidth: 막대 테두리의 너비를 정의한다.

2. options: 차트의 옵션을 정의하는 객체

- scales: 축에 대한 옵션을 설정한다.

· y: y축에 대한 옵션을 설정한다.
· beginAtZero: y축이 0부터 시작하는지를 설정한다. 이 값을 true로 설정하면 y축은 0부터 시작한다.

수평 막대 차트 (Horizontal Bar Chart)

options에 indexAxis 옵션을 'y'로 추가하면 수평 막대 차트를 생성할 수 있다.

const myBarChart = new Chart(ctx, {
    type: 'bar',
    data: { ... },
    options: {
        indexAxis: 'y', // 이 옵션을 추가하여 수평 막대 차트를 생성.
        ...
    }
});

indexAxis: 'y' 외의 옵션들은 모두 수직 막대 차트와 동일하다.

누적 막대 차트(Stacked Bar Chart)

Stacked Bar Chart(누적 막대 차트)는 막대 차트의 한 형태로, 여러 데이터 시리즈를 단일 막대 내에서 쌓아서 표현하는 방식이다. 각 막대는 여러 세그먼트로 나누어져 있으며, 각 세그먼트는 해당 카테고리 내에서의 하위 항목이나 그룹의 값을 나타낸다.

이렇게 쌓인 막대 차트는 전체적인 트렌드뿐만 아니라 각 카테고리 내의 세부 구성을 한눈에 볼 수 있도록 해준다. 예를 들어, 월별 판매량을 보여주는 막대 차트에서 각 월의 막대를 상품 카테고리별로 세분화하여 표시할 수 있다.

Stacked Bar Chart는 데이터의 구성 요소와 전체적인 크기를 함께 보여주므로, 비교와 구성을 시각화하는 데 유용하다. 하지만 많은 데이터 그룹이 겹쳐있을 때는 각 세그먼트의 정확한 값을 해석하기 어려울 수도 있다.

누적 막대 차트는 options의 각 축에 stacked를 true로 설정해주면 된다.
datasets에 1개의 데이터가 있을 때는 의미가 없고, 2개 이상일 때 사용할 수 있다.

options: {
    scales: {
        y: {
            stacked: true
        },
        x: {
            stacked: true
        }
    }
}

const ectx5 = document.querySelector('#example5').getContext('2d');
const example5 = new Chart(ectx5, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Dataset 1',
            data: [5, 10, 15, 20, 25],
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        },
        {
            label: 'Dataset 2',
            data: [10, 15, 20, 25, 30],
            backgroundColor: 'rgba(75, 192, 192, 0.5)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                stacked: true, // 이 옵션으로 x축을 쌓아올린다.
            },
            y: {
                stacked: true, // 이 옵션으로 y축을 쌓아올린다.
            }
        }
    }
});

오늘은 Chart.js를 사용해서 막대 차트(Bar chart)를 만드는 방법에 대해서 간단하게 알아보았다.
막대 차트는 데이터 시각화에서 기본적이면서도 강력한 도구인데, Chart.js로 깔끔하게 만들 수 있다.
이 포스트에서 소개한 옵션들 말고도 다양한 것이 많은데 공식 문서를 참고하면 좋을 것 같다.

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