Highcharts는 매우 강력한 JavaScript 차트 라이브러리이며, 데이터 시각화에 널리 사용됩니다. 데이터를 그룹화하면 관련 데이터를 함께 표시하여 시각적으로 이해하기 쉬운 차트를 만들 수 있습니다. 이 글에서는 Highcharts에서 데이터를 그룹화하는 방법을 알아보겠습니다.
데이터 그룹화 방법
Highcharts에서 데이터를 그룹화하는 방법은 두 가지가 있습니다.
-
그룹화된 카테고리 축 사용: 그룹화된 카테고리 축을 사용하여 데이터를 그룹화할 수 있습니다. 예를 들어, 연도별로 데이터를 그룹화하여 표시하는 경우, 카테고리 축에 연도를 설정하고, 카테고리 축에 해당하는 데이터를 그룹화하여 표시할 수 있습니다.
-
그룹화된 데이터 시리즈 사용: 데이터 시리즈를 그룹화하여 표시할 수도 있습니다. 예를 들어, 월별 매출 데이터를 그룹화하여 표시하는 경우, 각 월의 매출을 하나의 데이터 시리즈로 그룹화하여 차트에 표시할 수 있습니다.
그룹화된 카테고리 축 사용 예제
아래의 예제 코드는 Highcharts에서 그룹화된 카테고리 축을 사용하는 방법을 보여줍니다.
const chartOptions = {
chart: {
type: 'column'
},
xAxis: {
categories: ['2018', '2019', '2020']
},
yAxis: {
title: {
text: '매출'
}
},
series: [{
name: '서비스 A',
data: [100, 200, 300]
}, {
name: '서비스 B',
data: [150, 250, 350]
}]
};
Highcharts.chart('container', chartOptions);
위의 예제에서는 연도별로 데이터를 그룹화하여 막대 그래프로 표현합니다. 연도를 x축의 카테고리로 설정하고, 각 연도에 해당하는 매출 데이터를 그룹화하여 표시합니다.
그룹화된 데이터 시리즈 사용 예제
아래의 예제 코드는 Highcharts에서 그룹화된 데이터 시리즈를 사용하는 방법을 보여줍니다.
const chartOptions = {
chart: {
type: 'line'
},
xAxis: {
categories: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
},
yAxis: {
title: {
text: '매출'
}
},
series: [{
name: '2018',
data: [100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650]
}, {
name: '2019',
data: [120, 170, 220, 270, 320, 370, 420, 470, 520, 570, 620, 670]
}, {
name: '2020',
data: [150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700]
}]
};
Highcharts.chart('container', chartOptions);
위의 예제에서는 그룹화된 월별 매출 데이터를 선 그래프로 표현합니다. 각 월의 매출을 하나의 데이터 시리즈로 그룹화하여 차트에 표시합니다.
마치며
Highcharts에서 데이터를 그룹화하는 방법에 대해 알아보았습니다. 그룹화된 데이터를 사용하면 시각적으로 이해하기 쉬운 차트를 만들 수 있습니다. 이러한 기능을 활용하여 보다 깔끔하고 직관적인 데이터 시각화를 구현해보세요.