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

세로 막대형 차트

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

세로 막대형 차트는 일반적으로 범주 간 값을 비교하거나 시간에 따른 추세를 시각화하는 데 사용됩니다.

참고:

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

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

세로 막대형 차트

세로 막대형 차트는 서로 다른 범주를 비교하거나 시간에 따른 추세를 표시하는 일반적인 데이터 시각화 도구입니다. 각 막대의 높이가 해당 범주의 값을 나타내는 수직 막대로 구성되며, 데이터 포인트 간의 직관적인 비교를 제공합니다.

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


Column Chart


다음 예제는 기본 세로 막대형 차트를 생성합니다.

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

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

세로 막대형 차트는 계층형 범주 구조를 지원합니다.

범주 인코딩에서 여러 그룹화 수준을 정의할 수 있습니다.

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

image-20260420.ea11f8.png

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

const dataChart = sheet.dataCharts.add(
  'data-chart-hierarchy',
  10, 10, 600, 400,
  GC.Spread.Sheets.DataCharts.DataChartType.column
);

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

범위 세로 막대형 차트

범위 세로 막대형 차트는 수직 막대를 사용하여 각 범주의 값 범위를 표시합니다.

각 막대는 하한값과 상한값 사이의 구간을 나타냅니다.

범위 세로 막대형 차트는 최소값과 최대값, 신뢰 구간 또는 값 변동을 시각화하는 데 자주 사용됩니다.

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


Range Column Chart


하한값과 상한값을 정의하려면 vectors 구조(v19.1에서 도입)를 사용하여 하나의 값 구성 안에 두 필드를 모두 제공해야 합니다.

const sheet = spread.getActiveSheet();
sheet.name("Range Column Chart");

const dataChart = sheet.dataCharts.add(
  'data-chart-2',
  10, 10, 600, 400,
  GC.Spread.Sheets.DataCharts.DataChartType.column
);

dataChart.setChartConfig({
  tableName: 'Sales',
  config: {
    header: {
      title: "Range Column Chart"
    }
  },
  plots: [{
    type: GC.Spread.Sheets.DataCharts.DataChartType.rangeColumn,
    encodings: {
      values: [{
        vectors: {
          lower: { field: "Return" },
          upper: { field: "Sales" }
        },
        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
      }],
      category: {
        field: "Product"
      },
      color: {
        field: "Product"
      }
    }
  }]
});

누적 세로 막대형 차트

누적 세로 막대형 차트는 각 범주의 총값을 비교하면서 동시에 하위 범주가 전체 값에 얼마나 기여하는지를 보여줍니다. 각 막대는 하나의 범주를 나타내며, 개별 계열은 수직으로 누적되어 표시됩니다.


Stacked Column Chart


다음 예제는 누적 세로 막대형 차트를 생성합니다.

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


Percent Stacked Column Chart


다음 예제는 100% 누적 세로 막대형 차트를 생성합니다.

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