가로 막대형 차트
가로 막대형 차트는 가로 막대를 통해 범주형 데이터를 비교하는 데 사용되며, 각 막대의 길이는 해당 범주의 값을 나타냅니다. 이 차트에서는 카테고리(범주) 가 세로축(y축)에 정렬되고, 데이터 값은 가로축(x축)을 따라 표시됩니다. 범주명이 길어서 x축에 잘 들어가지 않는 경우, 가로 막대형 차트는 특히 유용합니다.
예를 들어, 다양한 제품 카테고리의 판매 실적을 표시할 때 막대 차트를 사용할 수 있습니다. SpreadJS는 다양한 유형의 가로 막대형 차트를 지원하며, 색상 팔레트, 그래프 투명도(opacity), 테두리 스타일(border style), 모서리 반경(corner radius) 등의 속성을 통해 자유롭게 커스터마이징할 수 있습니다.
이러한 설정은 코드를 통해 직접 지정하거나, SpreadJS 디자이너의 속성(Inspector) 탭을 통해 시각적으로 설정할 수 있습니다.
참고
이 항목의 모든 샘플은 "데이터 차트 생성하기" 페이지에 있는
salesTable데이터를 기반으로 작성되었습니다.따라서 차트를 추가하기 위해 해당 페이지에서 안내하는 기본 설정 단계를 먼저 완료해야 합니다. 필요에 따라 데이터 소스를 사용자의 요구에 맞게 커스터마이징할 수도 있습니다.
가로 막대형 차트
가로 막대형 차트는 직사각형 막대를 이용하여 여러 범주를 비교하거나, 범주와 값 간의 관계를 시각적으로 표현하는 데 사용됩니다.
각 막대의 길이는 해당하는 값의 크기를 나타내므로, 범주 간 크기를 직관적으로 비교할 수 있습니다.
가로 막대형 차트는 다음과 같은 경우에 자주 사용됩니다:
서로 다른 제품의 판매 수치를 비교
연령대별 인구 분포를 표시
가로 막대형 차트는 범주형 데이터를 명확하고 이해하기 쉬운 방식으로 표현하는 데 효과적이며 활용도가 높습니다.
아래는 가로 막대형 차트의 예시 이미지입니다:
다음 샘플 코드는 가로 막대형 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 가로 막대형 차트
const sheet = spread.getActiveSheet();
sheet.name("Bar Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 500, 300);
dataChart.setChartConfig({
tableName: 'Sales',
config: {
header: {
title: "Bar Chart"
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.bar,
encodings: {
values: [
{
field: "Sales",
aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
}
],
category: {
field: "Product"
},
color: {
field: "Product"
}
},
}
]
});범위 가로 막대형 차트
범위 가로 막대형 차트는 서로 다른 범주 내의 데이터 범위를 시각화합니다. 이 차트에서는 각 막대가 단일 값이 아닌 값의 범위를 나타냅니다. 막대는 시작점과 종료점을 가지며, 해당 범위 내의 최소값과 최대값을 시각적으로 보여줍니다. 이 차트는 값의 분산이나 변동폭이 중요한 데이터, 특히 하한과 상한을 함께 시각화해야 하는 분석 또는 비교 상황에서 유용하게 사용됩니다.
아래는 범위 가로 막대형 차트의 예시 이미지입니다:
다음 샘플 코드는 범위 가로 막대형 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 범위 가로 막대 차트
const sheet = spread.getActiveSheet();
sheet.name("Range Bar Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 500, 300);
dataChart2.setChartConfig({
tableName: 'Sales',
config: {
header: {
// 제목 설정
title: 'Range Bar Chart'
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.rangeBar,
encodings: {
values: [
{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum },
{ field: 'Return', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum },
],
category: { field: 'Product' },
color: { field: 'Product' },
}
}
]
});누적 가로 막대형 차트
누적 가로 막대형 차트는 하나의 막대 안에 여러 데이터 계열을 위로 쌓아서 표시하는 차트입니다. 각 막대는 하나의 범주를 나타내며, 막대를 구성하는 각 세그먼트는 서로 다른 하위 범주 또는 데이터 계열을 나타냅니다. 막대 전체의 길이는 해당 범주의 총합을 의미하고, 세그먼트는 총합이 어떻게 하위 항목으로 구성되어 있는지를 보여줍니다.
누적 가로 막대형 차트는 서로 다른 범주의 전체 크기를 비교하면서 동시에 각 범주의 구성 요소가 어떻게 나뉘는지를 시각적으로 표현하는 데 효과적입니다. 이를 통해 사용자는 각 범주의 총합뿐만 아니라 하위 항목 간의 상대적인 비율도 쉽게 파악할 수 있습니다.
아래는 누적 가로 막대형 차트의 예시 이미지입니다:
다음 샘플 코드는 누적 가로 막대형 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 누적 가로 막대형 차트
const sheet = spread.getActiveSheet();
sheet.name("Stacked Bar Chart");
const dataChart3 = sheet.dataCharts.add('data-chart-3', 10, 10, 500, 300);
dataChart3.setChartConfig({
tableName: 'Sales',
config: {
header: {
// 제목 설정
title: 'Stacked Bar Chart'
},
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.stackedBar,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Region' },
color: { field: 'Product' },
}
}
]
});100% 기준 누적 가로 막대형 차트
100% 기준 누적 가로 막대형 차트는 누적 가로 막대형 차트와 유사하지만, 데이터를 백분율 기준으로 표시한다는 점에서 차이가 있습니다. 이 차트에서는 각 막대가 하나의 범주의 총합을 나타내며, 막대를 구성하는 각 세그먼트는 해당 총합에서 각 하위 범주가 차지하는 비율(%)을 보여줍니다.
이러한 차트는 서로 다른 범주의 전체 크기를 비교하면서 동시에 각 범주의 상대적인 분포나 구성을 백분율로 확인하고자 할 때 특히 유용합니다. 100% 기준 누적 가로 막대형 차트를 사용하면 범주별 하위 항목들이 전체에서 차지하는 비율을 직관적으로 비교할 수 있으며, 각 범주 내 데이터가 어떻게 구성되어 있는지를 명확하게 시각화할 수 있습니다.
아래는 100% 기준 누적 가로 막대형 차트의 예시 이미지입니다:
다음 샘플 코드는 100% 기준 누적 가로 막대형 차트를 추가하는 방법을 보여줍니다.
Ask ChatGPT
// 100% 기준 누적 가로 막대형 차트
const sheet = spread.getActiveSheet();
sheet.name("Percent Stacked Bar Chart");
const dataChart4 = sheet.dataCharts.add('data-chart-4', 10, 10, 500, 300);
dataChart4.setChartConfig({
tableName: 'Sales',
config: {
header: {
// 제목 설정
title: 'Percent Stacked Bar Chart'
}
},
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.percentStackedBar,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Region' },
color: { field: 'Product' },
}
}
]
});