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

영역형 차트

영역형 차트는 시간에 따른 하나 이상의 데이터 값 변화를 나타내는 데 사용됩니다. 꺾은선형 차트와 유사하게 데이터 포인트를 표시하고 선분으로 연결하지만, 선과 x축 사이의 영역을 색상으로 채워 표현합니다. 이 채워진 영역은 각 시점의 값 크기를 보다 직관적으로 보여줍니다.

SpreadJS는 다양한 유형의 영역형 차트를 지원하며, 색상 팔레트, 그래프 투명도, 테두리 스타일, 범주 축 및 값 축 스타일 등의 차트 속성을 수정하여 사용자 지정할 수 있습니다. 이러한 수정은 코드를 통해서나 SpreadJS 디자이너의 Inspector 탭을 통해 수행할 수 있습니다.

참고:

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

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

영역형 차트

영역형 차트는 연속적인 구간 또는 시간에 따른 정량적 데이터를 표시합니다. 이 차트에서는 x축과 데이터를 나타내는 선 사이의 영역이 색상으로 채워져 값의 크기와 시간 또는 범주에 따른 변화를 쉽게 파악할 수 있습니다. 영역형 차트는 시간에 따른 추세를 보여주거나, 범주별 총값을 강조하거나, 전체에 대한 각 구성 요소의 기여도를 비교하는 데 효과적입니다.

영역형 차트의 예시는 아래와 같습니다.


Area chart


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

// Area Chart
const sheet = spread.getActiveSheet();
sheet.name("Area Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
     tableName: 'Sales',
     config: {
         header: {
             title: "Area Chart"
         },
     },
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.area,
             encodings: {
                 category: {
                     field: "Salesman"
                 },
                 values: [
                     {
                         field: "Sales",
                         aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                     }
                 ],
                 color: {
                     field: "Product"
                 },
                 filter: {
                     operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                     conditions: [
                         {
                             field: "Region",
                             excludeMatched: false,
                             operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                             value: ["East"]
                         }
                     ]
                 }
             },
             config: {
                 axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
             }
         }
     ]
});

계층형 범주를 사용하는 영역형 차트

영역형 차트는 계층형 범주 그룹화를 지원합니다.

category: {
  field: "Salesman",
  child: {
    field: "ProductCategory"
  }
}

image-20260420.94904f.png

범위 영역형 차트

범위 영역형 차트는 범주 전반에 걸쳐 하한값과 상한값 사이의 범위를 표시합니다. 단일 계열을 표시하는 대신 두 경계 사이의 영역을 채워 변동 폭을 강조합니다.

SpreadJS v19.1부터 범위 영역형 차트는 하한값 필드와 상한값 필드를 하나의 논리적 범위 값으로 바인딩합니다.

범위 영역형 차트의 예시는 아래와 같습니다.


Range Area Chart


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

// Range Area Chart
const sheet = spread.getActiveSheet();
sheet.name("Range Area Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Range Area Chart"
        },
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.rangeArea,
            encodings: {
                category: {
                    field: "Salesman"
                },
                details: [{
                    field: "Product"
                }],
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    },
                    {
                        field: "Return",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                filter: {
                    operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                    conditions: [
                        {
                            field: "Region",
                            excludeMatched: false,
                            operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                            value: ["East"]
                        }
                    ]
                }
            },
            config: {
                axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
            }
        }
    ]
});

누적 영역형 차트

누적 영역형 차트는 여러 데이터 계열을 서로 위에 누적하여 표시하며, 각 계열은 서로 다른 색상의 영역으로 표현됩니다. 영역이 누적되므로 전체 값과 각 계열이 전체에 기여하는 정도를 시간 또는 범주별로 쉽게 비교할 수 있습니다.

이 차트에서는 특정 시점의 전체 높이가 누적된 모든 값의 합계를 나타내며, 각 영역은 서로 다른 데이터 계열을 의미합니다. 이를 통해 전체 값이 각 계열에 어떻게 분배되는지 확인할 수 있습니다.

누적 영역형 차트의 예시는 아래와 같습니다.


Stacked Area Chart


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

// Stacked Area Chart
const sheet = spread.getActiveSheet();
sheet.name("Stacked Area Chart");
const dataChart3 = sheet.dataCharts.add('data-chart-3', 10, 10, 600, 400);
dataChart3.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Stacked Area Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.stackedArea,
            encodings: {
                category: {
                    field: "Salesman"
                },
                color: {
                    field: "Product"
                },
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                filter: {
                    operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                    conditions: [
                        {
                            field: "Region",
                            excludeMatched: false,
                            operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                            value: ["North"]
                        }
                    ]
                }
            },
            config: {
                axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
            }
        }
    ]
});

100% 누적 영역형 차트

100% 누적 영역형 차트는 누적 영역형 차트의 특징에 더해 데이터를 백분율 기준으로 표시합니다. 이 차트에서 각 영역은 특정 범주 또는 기간의 총값을 나타내며, 영역 내부의 각 구간은 전체 대비 하위 범주의 비율을 백분율로 보여줍니다.

이 차트 유형은 여러 범주 또는 기간의 전체 규모를 비교하는 동시에 각 범주의 상대적 분포 또는 구성을 백분율로 이해하는 데 특히 유용합니다. 100% 누적 영역형 차트는 데이터를 백분율 기준으로 표시하므로, 범주 또는 기간 간 하위 범주의 상대적 기여도를 쉽게 비교할 수 있습니다.

100% 누적 영역형 차트의 예시는 아래와 같습니다.


Percent Stacked Area Chart


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

// Percent Stacked Area Chart
const sheet = spread.getActiveSheet();
sheet.name("Percent Stacked Area Chart");
const dataChart4 = sheet.dataCharts.add('data-chart-4', 10, 10, 600, 400);
dataChart4.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Percent Stacked Area Chart"
        },
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.percentStackedArea,
            encodings: {
                category: {
                    field: "Salesman"
                },
                color: {
                    field: "Product"
                },
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                filter: {
                    operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                    conditions: [
                        {
                            field: "Region",
                            excludeMatched: false,
                            operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                            value: ["North"]
                        }
                    ]
                }
            },
            config: {
                axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
            }
        }
    ]
});

선 모양

영역형 차트 계열은 lineAspect 속성을 지원하며, 데이터 포인트 사이의 선이 렌더링되는 방식을 제어합니다.

선 모양 지원 매트릭스

Chart Type

Default

Spline

StepLeft

StepRight

StepCenter

Bezier

Area

image-20260420.d7b797.png

image-20260420.27423d.png

image-20260420.4e9a03.png

image-20260420.1098a2.png

image-20260420.804480.png

image-20260420.2163ab.png

Range Area

image-20260420.ee60da.png

image-20260420.08abe6.png

지원하지 않음

지원하지 않음

지원하지 않음

image-20260420.b3bb97.png

Stacked Area

image-20260420.29a986.png

image-20260420.d19597.png

image-20260420.5d2459.png

image-20260420.91be23.png

image-20260420.207a65.png

image-20260420.b695eb.png

Percent Stacked Area

image-20260420.278871.png

image-20260420.75c44a.png

image-20260420.974864.png

image-20260420.0a196a.png

image-20260420.36b12f.png

image-20260420.40e414.png

예제

dataChart.setChartConfig({
  tableName: 'Sales',
  plots: [{
    type: GC.Spread.Sheets.DataCharts.DataChartType.area,
    config: {
      lineAspect: GC.Spread.Sheets.DataCharts.LineAspect.Spline
    }
  }]
});

lineAspect를 지정하지 않았거나 null 또는 undefined로 설정한 경우 차트는 Default 동작을 사용합니다.

누적 영역형 차트와 100% 누적 영역형 차트는 일반 영역형 차트와 동일한 방식으로 lineAspect를 렌더링합니다.