# 영역형 차트

## Content

영역형 차트는 **시간에 따른 각 데이터 값의 총합에 대한 기여도**를 시각화하는 데 주로 사용됩니다. 일반적으로 이 차트는 시간에 따른 변화와 **전체 값의 추세**를 보여주고자 할 때 유용합니다. **플롯된 값들의 합계를 시각적으로 표현**할 수 있습니다.
워크시트의 **열 또는 행에 정리된 데이터**는 영역형 차트로 플롯할 수 있습니다.
SpreadJS는 아래와 같은 영역형 차트 유형들을 지원합니다. 아래 예제는 Q1, Q2, Q3의 연간 판매 데이터를 기반으로 다양한 영역형 차트 유형을 보여줍니다. 제품 카테고리는 모바일폰, 노트북, 태블릿입니다.

## 영역형 차트

누적 영역형 차트는 여러 시리즈의 값을 비교할 수 있도록 **데이터 시리즈를 색으로 채운 영역형 형태로 표시**합니다. 이 차트는 시간에 따른 추세를 보여줍니다.
아래 이미지는 누적 영역형 차트를 보여줍니다:
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/Area.png)

## 누적 영역형 차트

누적 영역형 차트는 **여러 시리즈의 값을 누적된 색상 영역으로 표시**하여, 동일한 데이터 지점에 대한 각 시리즈의 기여도를 시간 또는 다른 범주형 데이터에 따라 비교하는 데 유용합니다.
아래 이미지는 누적 영역형 차트를 보여줍니다:
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/Stacked_Area.png)

## 100% 기준 누적 영역형 차트

100% 기준 누적 영역형 차트는 **양수 및 음수 값을 포함한 데이터 시리즈를 시간에 따라 표시**하며, 동일한 데이터 지점에 대한 **각 값이 기여한 비율(%)**을 보여줍니다. 시간 또는 다른 범주형 데이터에 따라 변화하는 비율 추세를 시각화할 수 있습니다.
아래 이미지는 100% 기준 누적 영역형 차트를 보여줍니다:
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/100_Stacked_Area.png)

아래는 다양한 유형의 영역형 차트를 스프레드시트에 추가하는 코드 샘플입니다:

```javascript
var chart_area, chart_areaStacked, chart_areaStacked100, sheet;
window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    sheet = spread.getActiveSheet();
    sheet.suspendPaint();
    //데이터 준비
    sheet.setValue(0, 1, "Q1");
    sheet.setValue(0, 2, "Q2");
    sheet.setValue(0, 3, "Q3");
    sheet.setValue(1, 0, "Mobile Phones");
    sheet.setValue(2, 0, "Laptops");
    sheet.setValue(3, 0, "Tablets");
    for (var r = 1; r <= 3; r++) {
        for (var c = 1; c <= 3; c++) {
            sheet.setValue(r, c, parseInt(Math.random() * 100));
        }
    }
    // 영역형 차트 추가 
    chart_area = sheet.charts.add('chart_areaClustered', GC.Spread.Sheets.Charts.ChartType.area, 250, 20, 600, 400, "A1:D4");
    // 누적 영역형 차트 추가
    chart_areaStacked = sheet.charts.add('chart_areaStacked', GC.Spread.Sheets.Charts.ChartType.areaStacked, 250, 480, 600, 400, "A1:D4");
    // 100% 기준 누적 영역형 차트 추가
    chart_areaStacked100 = sheet.charts.add('chart_areaStacked100', GC.Spread.Sheets.Charts.ChartType.areaStacked100, 250, 900, 600, 400, "A1:D4");
    sheet.resumePaint();
};
```