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

방사형 차트

방사형 차트는 공통 중심점에서 방사형으로 뻗어나가는 축에 다변량 데이터를 표시합니다. 매출, 비용, 성과 또는 평가 지표와 같이 여러 차원에 걸친 패턴을 비교하는 데 일반적으로 사용됩니다.

SpreadJS는 두 가지 방사형 차트 유형인 방사형 차트와 채워진 방사형 차트를 지원합니다.

참고: 이 항목의 모든 샘플은 데이터 차트 생성 항목에서 소개한 Sales 테이블을 사용합니다. 차트를 추가하기 전에 데이터 원본이 구성되어 있는지 확인하세요.

방사형 차트

방사형 차트는 여러 방사형 축에 걸쳐 데이터 포인트를 연결하여 다각형을 형성하므로, 여러 차원에 걸친 값 분포를 비교하는 데 유용합니다.

Radar chart

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

// Radar Chart
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-20260402.626ec7.png

채워진 방사형 차트를 추가하려면 다음 샘플 코드를 참조하세요.

// Filled Radar Chart
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"]
                         }
                     ]
                 }
             },
         }
     ]
});

선 모양

방사형 차트와 채워진 방사형 차트는 lineAspect 속성을 지원하며, 방사형 축을 따라 데이터 포인트가 연결되는 방식을 제어합니다.

데이터 유형

Default

Spline

방사형 차트

Radar chart

image-20260420.025cf7.png

채워진 방사형 차트

image-20260402.626ec7.png

image-20260420.cb8bb7.png

lineAspect를 null 또는 undefined로 설정하면 차트는 Default 동작으로 렌더링됩니다.


예제

config: {
  lineAspect: GC.Spread.Sheets.DataCharts.LineAspect.Spline
}