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

영역형 차트

영역형 차트는 시간에 따른 각 데이터 값의 총합에 대한 기여도를 시각화하는 데 주로 사용됩니다. 일반적으로 이 차트는 시간에 따른 변화와 전체 값의 추세를 보여주고자 할 때 유용합니다. 플롯된 값들의 합계를 시각적으로 표현할 수 있습니다.

워크시트의 열 또는 행에 정리된 데이터는 영역형 차트로 플롯할 수 있습니다.

SpreadJS는 아래와 같은 영역형 차트 유형들을 지원합니다. 아래 예제는 Q1, Q2, Q3의 연간 판매 데이터를 기반으로 다양한 영역형 차트 유형을 보여줍니다. 제품 카테고리는 모바일폰, 노트북, 태블릿입니다.

영역형 차트

누적 영역형 차트는 여러 시리즈의 값을 비교할 수 있도록 데이터 시리즈를 색으로 채운 영역형 형태로 표시합니다. 이 차트는 시간에 따른 추세를 보여줍니다.

아래 이미지는 누적 영역형 차트를 보여줍니다:


누적 영역형 차트

누적 영역형 차트는 여러 시리즈의 값을 누적된 색상 영역으로 표시하여, 동일한 데이터 지점에 대한 각 시리즈의 기여도를 시간 또는 다른 범주형 데이터에 따라 비교하는 데 유용합니다.

아래 이미지는 누적 영역형 차트를 보여줍니다:


100% 기준 누적 영역형 차트

100% 기준 누적 영역형 차트는 양수 및 음수 값을 포함한 데이터 시리즈를 시간에 따라 표시하며, 동일한 데이터 지점에 대한 각 값이 기여한 비율(%)을 보여줍니다. 시간 또는 다른 범주형 데이터에 따라 변화하는 비율 추세를 시각화할 수 있습니다.

아래 이미지는 100% 기준 누적 영역형 차트를 보여줍니다:



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

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();
};