# 영역형 차트

## Content

**영역형 차트**는 시간에 따른 하나 이상의 데이터 값 변화를 나타내는 데 사용됩니다. 꺾은선형 차트와 유사하게 데이터 포인트를 표시하고 선분으로 연결하지만, 선과 x축 사이의 영역을 색상으로 채워 표현합니다. 이 채워진 영역은 각 시점의 값 크기를 보다 직관적으로 보여줍니다.
SpreadJS는 다양한 유형의 영역형 차트를 지원하며, 색상 팔레트, 그래프 투명도, 테두리 스타일, 범주 축 및 값 축 스타일 등의 차트 속성을 수정하여 사용자 지정할 수 있습니다. 이러한 수정은 코드를 통해서나 SpreadJS 디자이너의 Inspector 탭을 통해 수행할 수 있습니다.

>type=note
> **참고:**
>
> * 이 항목의 모든 샘플은 [데이터 차트 생성](/spreadjs/docs/features/data-charts/create-data-charts) 항목에서 소개한 Sales 테이블을 사용합니다. 차트를 추가하기 전에 데이터 원본이 구성되어 있는지 확인하세요.
> * 범주 및 값 인코딩에 대한 자세한 내용은 [데이터 원본 바인딩](/spreadjs/docs/features/data-charts/data-binding)을 참조하세요.

## 영역형 차트

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

![Area chart](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Area%20chart.c3c4de.png?width=550)

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

```javascript
// 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
             }
         }
     ]
});
```

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

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

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

![image-20260420.94904f.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.94904f-20260529.a44fb5.png)

## 범위 영역형 차트

범위 영역형 차트는 범주 전반에 걸쳐 하한값과 상한값 사이의 범위를 표시합니다. 단일 계열을 표시하는 대신 두 경계 사이의 영역을 채워 변동 폭을 강조합니다.
SpreadJS v19.1부터 범위 영역형 차트는 하한값 필드와 상한값 필드를 하나의 논리적 범위 값으로 바인딩합니다.
범위 영역형 차트의 예시는 아래와 같습니다.

![Range Area Chart](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Range%20Area%20Chart.e4ae57.png?width=550)

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

```javascript
// 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](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Stacked%20Area%20Chart.6a3bbd.png?width=550)

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

```javascript
// 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](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Percent%20Stacked%20Area%20Chart.6bf480.png?width=550)

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

```javascript
// 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](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.d7b797-20260529.2de168.png) | ![image-20260420.27423d.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.27423d-20260529.d0b8ff.png) | ![image-20260420.4e9a03.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.4e9a03-20260529.355bf5.png) | ![image-20260420.1098a2.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.1098a2-20260529.6e452c.png) | ![image-20260420.804480.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.804480-20260529.4e0930.png) | ![image-20260420.2163ab.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.2163ab-20260529.9fca16.png) |
| Range Area | ![image-20260420.ee60da.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.ee60da-20260529.44e605.png) | ![image-20260420.08abe6.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.08abe6-20260529.dbb0d6.png) | 지원하지 않음 | 지원하지 않음 | 지원하지 않음 | ![image-20260420.b3bb97.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.b3bb97-20260529.668c97.png) |
| Stacked Area | ![image-20260420.29a986.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.29a986-20260529.68fd2c.png) | ![image-20260420.d19597.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.d19597-20260529.da2800.png) | ![image-20260420.5d2459.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.5d2459-20260529.3ceb7d.png) | ![image-20260420.91be23.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.91be23-20260529.87c44b.png) | ![image-20260420.207a65.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.207a65-20260529.4bcbea.png) | ![image-20260420.b695eb.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.b695eb-20260529.eaab07.png) |
| Percent Stacked Area | ![image-20260420.278871.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.278871-20260529.55e0e1.png) | ![image-20260420.75c44a.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.75c44a-20260529.72b481.png) | ![image-20260420.974864.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.974864-20260529.598bba.png) | ![image-20260420.0a196a.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.0a196a-20260529.966a08.png) | ![image-20260420.36b12f.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.36b12f-20260529.ea2af3.png) | ![image-20260420.40e414.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.40e414-20260529.50f173.png) |

### 예제

```javascript
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`를 렌더링합니다.