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

가로 막대형 차트

SpreadJS는 수평 막대를 사용하여 범주형 데이터를 비교하는 여러 유형의 가로 막대형 차트를 지원합니다. 범주는 세로 축에 표시되며, 집계된 값은 가로 축에 표시됩니다.

가로 막대형 차트는 범주 레이블이 길거나 가로 레이아웃이 가독성을 향상시키는 경우에 특히 유용합니다.

참고:

  • 이 항목의 모든 샘플은 데이터 차트 생성 항목에서 소개한 Sales 테이블을 사용합니다. 차트를 추가하기 전에 데이터 원본이 구성되어 있는지 확인하세요.

  • 범주 및 값 인코딩에 대한 자세한 내용은 데이터 원본 바인딩을 참조하세요.

가로 막대형 차트

가로 막대형 차트는 직사각형 막대를 사용하여 서로 다른 범주를 비교하거나 범주와 값 간의 관계를 나타냅니다. 각 막대의 길이는 해당 값에 비례하므로 서로 다른 범주의 크기를 쉽게 시각적으로 비교할 수 있습니다.

가로 막대형 차트는 일반적으로 제품별 판매 수치를 비교하거나 다양한 연령대의 인구 분포를 나타내는 등 범주형 데이터를 표시하는 데 사용됩니다. 다양한 상황에 활용할 수 있으며 데이터를 명확하고 이해하기 쉬운 방식으로 표현하는 데 효과적입니다.

가로 막대형 차트의 예시는 아래와 같습니다.


Bar Chart


가로 막대형 차트를 추가하려면 다음 샘플 코드를 참조하세요.

// Bar Chart
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"
                }
            },
        }
    ]
});

계층형 범주를 사용하는 가로 막대형 차트

가로 막대형 차트는 계층형 범주 구조를 지원합니다. category 인코딩에서 여러 그룹화 수준을 정의할 수 있습니다.

다음 예제는 연도 → 분기 → 월 기준으로 그룹화된 가로 막대형 차트를 보여줍니다.

image-20260420.60a68c.png

// Bar Chart with Hierarchical Category
const sheet = spread.getActiveSheet();
sheet.name("Hierarchical Bar Chart");

const dataChart = sheet.dataCharts.add(
  'data-chart-hierarchy',
  10, 10, 500, 300
);

dataChart.setChartConfig({
  tableName: 'HierarchySales',
  config: {
    header: {
      title: "Hierarchical Bar Chart"
    }
  },
  plots: [{
    type: GC.Spread.Sheets.DataCharts.DataChartType.bar,
    encodings: {
      values: [{
        field: "sales",
        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
      }],
      category: {
        field: "year",
        child: {
          field: "quarter",
          child: {
            field: "month"
          }
        }
      }
    }
  }]
});

범위 가로 막대형 차트

범위 가로 막대형 차트는 단일 집계 값 대신 각 범주의 값 범위를 표시합니다. 각 막대는 하나의 하한값~상한값 구간을 나타내며, 범주 간 분포, 임계값 또는 측정 범위를 비교하는 데 유용합니다.

범위 가로 막대형 차트의 예시는 아래와 같습니다.


Range Bar Chart


범위 가로 막대형 차트를 추가하려면 다음 샘플 코드를 참조하세요.

// Range Bar Chart
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 settings
                        title: 'Range Bar Chart'
                    }
          },
          plots: [
                    {
                        type: GC.Spread.Sheets.DataCharts.DataChartType.rangeBar,
                        encodings: {
                                values: [{
                                vectors: {
                                    lower: { field: "Return" },
                                    upper: { field: "Sales" }
                                },
                                aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                                }],
                            category: { field: 'Product' },
                            color: { field: 'Product' },
                        }
                    }
          ]
});

누적 가로 막대형 차트

누적 가로 막대형 차트는 하나의 막대 안에 여러 데이터 계열을 누적하여 표시합니다. 각 막대는 하나의 범주를 나타내며, 막대 내부의 각 구간은 서로 다른 하위 범주 또는 데이터 계열을 나타냅니다. 막대의 전체 길이는 해당 범주의 총값을 나타내고, 각 구간은 총값이 하위 범주들로 어떻게 구성되는지를 보여줍니다.

누적 가로 막대형 차트는 서로 다른 범주의 전체 규모를 비교하면서 동시에 각 범주의 구성을 부분별로 보여주는 데 효과적입니다. 이를 통해 사용자는 각 범주의 총값과 함께 하위 범주들의 상대적 비율도 쉽게 파악할 수 있습니다.

누적 가로 막대형 차트의 예시는 아래와 같습니다.


Stacked Bar Chart


누적 가로 막대형 차트를 추가하려면 다음 샘플 코드를 참조하세요.

// Stacked Bar Chart
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 settings
                        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% 누적 가로 막대형 차트의 예시는 아래와 같습니다.


Percent Stacked Bar Chart


100% 누적 가로 막대형 차트를 추가하려면 다음 샘플 코드를 참조하세요.

// Percent Stacked Bar Chart
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 settings
            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' },
            }
        }
    ]
});