[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

세로 막대형 차트

세로 막대형 차트는 수직 막대를 통해 범주형 데이터를 비교할 수 있는 유용한 시각화 방법입니다. 이 차트에서는 x축에 카테고리(범주) 가, y축(수직 축)에 데이터 값이 표시됩니다. 세로 막대형 차트는 특히 x축에 표시할 값이 많아 라벨이 겹치기 쉬운 경우에 효과적입니다. 예를 들어, 전 세계 각 국가의 인구 비중을 나타낼 때 세로 막대형 차트를 사용할 수 있습니다.

SpreadJS는 다양한 유형의 세로 막대형 차트를 지원하며, 색상 팔레트, 그래프 투명도(opacity), 테두리 스타일(border style), 모서리 반경(corner radius) 등의 속성을 코드 또는 SpreadJS 디자이너의 속성(Inspector) 탭을 통해 자유롭게 커스터마이징할 수 있습니다.

이 항목에 포함된 모든 예제는 “데이터 차트 생성하기” 페이지의 salesTable 데이터를 기반으로 합니다.

따라서 해당 페이지에서 안내된 기본 설정 단계를 먼저 완료해야 합니다. 또한, 사용자의 필요에 따라 데이터 소스를 자유롭게 커스터마이징할 수도 있습니다.

세로 막대형 차트

세로 막대형 차트는 범주별 비교 또는 시간에 따른 추세를 시각화할 수 있는 일반적인 도구입니다. 이 차트는 수직 막대로 구성되어 있으며, 막대의 높이가 각 범주의 값을 나타냅니다. 따라서 데이터 포인트 간 비교가 직관적으로 가능합니다. 아래 이미지는 세로 막대형 차트의 예시입니다:

image


다음 예제 코드는 세로 막대형 차트를 추가하는 방법을 보여줍니다.

// 세로 막대형 차트
const sheet = spread.getActiveSheet();
sheet.name("Column Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Column Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.column,
            encodings: {
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                category: {
                    field: "Product"
                },
                color: {
                    field: "Product"
                }
            }
        }
    ]
});

범위 세로 막대형 차트

범위 세로 막대형 차트는 개별 데이터 포인트가 아닌 값의 범위를 표시하는 차트입니다.

이 차트에서 각 막대는 시작 값과 종료 값으로 구성된 하나의 범위를 수직 막대 형태로 나타냅니다. 즉, 해당 범위 내의 최소값과 최대값을 시각적으로 표현합니다. 이러한 차트는 범위 내의 정확한 값이 중요한 경우에 유용하며, 범주나 시간대별로 범위를 비교할 때 효과적입니다.

금융, 통계, 프로젝트 관리 등의 분야에서 최고값과 최저값, 목표 범위, 신뢰 구간(confidence interval) 등을 시각화하는 데 자주 사용됩니다.

아래 이미지는 범위 세로 막대형 차트의 예시입니다:


image


다음 샘플 코드는 범위 세로 막대형 차트를 추가하는 방법을 보여줍니다.

// 범위 세로 막대형 차트
const sheet = spread.getActiveSheet();
sheet.name("Range Column Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart2.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Range Column Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.rangeColumn,
            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"
                }
            }

        }
    ]
});

누적 세로 막대형 차트

누적 세로 막대형 차트는 서로 다른 범주의 전체 크기를 비교함과 동시에, 각 범주가 어떤 구성 요소로 이루어졌는지를 보여주는 차트입니다. 이 차트에서 각 막대는 하나의 범주(category)를 나타내며, 여러 데이터 계열(series) 이 위로 쌓이는 방식으로 표시됩니다.

막대 전체의 높이는 해당 범주의 총합을 의미하며, 각 세그먼트는 하위 범주가 전체에 기여한 정도를 나타냅니다.

누적 세로 막대형 차트는 다음과 같은 경우에 유용합니다:

  • 각 항목과 전체 간의 관계를 시각적으로 표현하고자 할 때

  • 전체 크기와 하위 범주의 비율을 한눈에 비교하고자 할 때

아래 이미지는 누적 세로 막대형 차트의 예시입니다:

image


다음 샘플 코드는 누적 세로 막대형 차트를 추가하는 방법을 보여줍니다.

Ask ChatGPT

// 누적 세로 막대형 차트
const sheet = spread.getActiveSheet();
sheet.name("Stacked Column Chart");
const dataChart3 = sheet.dataCharts.add('data-chart-3', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart3.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: 'Stacked Column Chart'
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.stackedColumn,
            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Region' },
                color: { field: 'Product' },
            }
        }
    ]
});

100% 기준 누적 세로 막대형 차트

100% 기준 누적 세로 막대형 차트는 일반적인 스택드 컬럼 차트와 유사하지만, 데이터를 백분율(%) 기준으로 표시한다는 점이 다릅니다.

이 차트에서는 각 막대의 높이가 해당 범주의 총합을 나타내며, 막대 내의 각 세그먼트는 전체에서 각 하위 범주가 차지하는 비율(%) 을 보여줍니다.

100% 기준 누적 세로 막대형 차트는 다음과 같은 경우에 유용합니다:

  • 서로 다른 범주의 전체 크기를 비교하면서

  • 각 범주의 상대적인 분포나 구성 비율을 이해하고자 할 때

이 차트는 각 범주에서 하위 항목들이 어떻게 기여하고 있는지를 비교하기 쉬워, 데이터의 전체 분포를 보다 명확하게 시각화할 수 있습니다.

아래 이미지는 100% 기준 누적 세로 막대형 차트의 예시입니다:

image

다음 샘플 코드는 100% 기준 누적 세로 막대형 차트를 추가하는 방법을 보여줍니다.

Ask ChatGPT

// 100% 기준 누적 세로 막대형 차트
const sheet = spread.getActiveSheet();
sheet.name("Percent Stacked Column Chart");
const dataChart4 = sheet.dataCharts.add('data-chart-3', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart4.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: 'Percent Stacked Column Chart'
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.percentStackedColumn,

            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Region' },
                color: { field: 'Product' },
            }
        }
    ]
});