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

방사형 차트

방사형 차트는 여러 특성 또는 지표에 걸쳐 두 개 이상의 값 집합을 비교할 수 있는 방사형 차트입니다. 각 변수는 중심점을 기준으로 동일한 간격으로 배치된 축(axis)에 개별적으로 표현되며, 이 축들은 동일한 눈금(scale)을 공유합니다. 각 항목의 값은 축을 따라 플로팅되고, 이 점들을 선으로 연결하여 다각형을 형성합니다.

이러한 차트는 일반적으로 성과 분석, 지표 비교(예: 수익과 지출 등)에 사용됩니다.

SpreadJS는 다양한 종류의 방사형 차트를 지원하며, 다음과 같은 속성을 통해 커스터마이징이 가능합니다: 색상 팔레트, 그래프 투명도, 포인트 심볼, 범주 및 값 축 스타일 등.

이러한 설정은 코드 또는 SpreadJS 디자이너의 속성(Inspector) 탭을 통해 적용할 수 있습니다.

이 항목의 모든 샘플은 "데이터 차트 생성하기" 페이지의 "salesTable" 데이터를 기반으로 합니다. 따라서 해당 페이지에 안내된 기본 단계를 완료한 후 차트를 추가해야 하며, 필요에 따라 데이터 소스를 사용자 정의할 수 있습니다.

방사형 차트

방사형 차트는 여러 개의 정량적인 변수를 2차원 형식으로 시각화하는 그래프 방법입니다. 세 개 이상의 변수가 중심점에서 시작하는 축 위에 배치됩니다.

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

image


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

Ask ChatGPT

// 방사형 차트
const sheet = spread.getActiveSheet();
sheet.name("Radar Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Radar Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.radar,
            encodings: {
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                category: {
                    field: "Salesman"
                },
                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"]
                        }
                    ]
                }
            }
        }
    ]
});

채워진 방사형 차트

채워진 방사형 차트는 일반 레이더 차트의 변형으로, 데이터 포인트를 연결해 형성된 다각형 내부가 채워져(음영 또는 색상으로) 보다 명확하게 데이터 영역을 강조하는 차트 유형입니다. 이 차트는 중심점과 데이터 포인트 사이의 공간을 채움으로써, 시리즈 간의 차이나 분포 범위를 한눈에 파악할 수 있게 도와줍니다.

아래 이미지는 채워진 방사형 차트의 예시입니다:

image


다음 샘플 코드는 채워진 방사형 차트를 추가하는 방법을 보여줍니다.

Ask ChatGPT

// 채워진 방사형 차트
const sheet = spread.getActiveSheet();
sheet.name("Filled Radar Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
     tableName: 'Sales',
     config: {
         header: {
             title: "Filled Radar Chart"
         },
     },
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.filledRadar,
             encodings: {
                 values: [
                     {
                         field: "Sales",
                         aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                     }
                 ],
                 category: {
                     field: "Salesman"
                 },
                 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"]
                         }
                     ]
                 }
             },
         }
     ]
});