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

영역형 차트

영역형 차트는 하나 이상의 데이터 양이 시간에 따라 어떻게 변하는지를 나타내는 데 사용됩니다. 꺾은선형 차트와 유사하게, 영역형 차트는 데이터 포인트를 선분으로 연결하며, 선과 x축 사이의 영역을 색으로 채웁니다. 이 채워진 영역은 시간대별 값의 크기를 시각적으로 강조하는 데 도움이 됩니다.

SpreadJS는 다양한 유형의 영역형 차트를 지원하며, 색상 팔레트 설정, 그래프 투명도, 테두리 스타일, 카테고리 및 값 축 스타일 등의 속성을 수정하여 커스터마이징할 수 있습니다. 이러한 수정은 코드 또는 SpreadJS 디자이너의 속성(Inspector) 탭을 통해 수행할 수 있습니다.

이 항목에 포함된 모든 샘플은 "데이터 차트 생성하기" 페이지의 "salesTable" 데이터를 기반으로 합니다. 따라서 해당 페이지에서 안내하는 기본 설정 단계를 먼저 완료해야 합니다. 또한 데이터 소스를 사용자의 요구에 맞게 커스터마이징할 수도 있습니다.

영역형 차트

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

아래 이미지는 영역형 차트의 예시입니다:

image


다음 샘플 코드는 영역형 차트를 추가하는 방법을 보여줍니다.

Ask ChatGPT

// 영역형 차트
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
             }
         }
     ]
});

범위 영역형 차트

범위 영역형 차트는 연속적인 구간 또는 시간대에 걸친 데이터 범위를 나타냅니다. 일반적인 하나의 선 또는 면으로 데이터를 표현하는 대신, 범위 영역형 차트는 두 개의 선 또는 영역을 사용하여 최소값과 최대값 사이의 범위를 음영 처리된 영역으로 보여줍니다.

이러한 차트는 값의 분산이나 변동폭을 이해하는 데 특히 유용합니다. 최소값과 최대값 사이의 범위를 시각적으로 표현함으로써, 시간 또는 범주에 따른 데이터 분포와 변화를 명확하게 보여줍니다.

범위 영역형 차트는 주로 금융, 통계, 프로젝트 관리 등에서 사용되며, 예를 들어 주가 변동, 기온 범위, 생산 편차 등과 같은 데이터를 표시하는 데 활용됩니다. 이러한 차트는 데이터셋 내의 값 범위를 효과적으로 강조하고, 데이터에 존재하는 변동성과 추세에 대한 인사이트를 제공합니다.

아래 이미지는 범위 영역형 차트의 예시입니다:


image


다음 샘플 코드는 범위 영역형 차트를 추가하는 방법을 보여줍니다.

Ask ChatGPT

// 범위 영역형 차트
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
            }
        }
    ]
});

누적 영역형 차트

누적 영역형 차트는 여러 데이터 계열이 위로 쌓여 표시되는 차트로, 각 계열은 서로 다른 색상의 영역으로 표현됩니다. 이 영역들은 누적되어 전체 값을 보여주며, 시간이나 범주에 따라 전체 크기와 각 계열이 전체에 기여하는 정도를 쉽게 비교할 수 있도록 해줍니다.

이 차트에서는 특정 시점에서의 전체 높이가 모든 누적된 값의 합을 나타내며, 각 구간은 서로 다른 데이터 계열을 의미합니다. 이러한 형식은 전체 값이 어떻게 다양한 계열로 구성되어 있는지를 시각적으로 파악하는 데 유용합니다.

아래 이미지는 누적 영역형 차트의 예시입니다:

image


다음 샘플 코드는 누적 영역형 차트를 추가하는 방법을 보여줍니다.

Ask ChatGPT

// 누적 영역형 차트
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% 기준 누적 영역형 차트의 예시입니다:

image


다음 샘플 코드는 100% 기준 누적 영역형 차트를 추가하는 방법을 보여줍니다.

// 100% 기준 누적 영역형 차트
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
            }
        }
    ]
});