# 방사형 차트

## Content

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

>type=note
> **참고:** 이 항목의 모든 샘플은 [데이터 차트 생성](/spreadjs/docs/features/data-charts/create-data-charts) 항목에서 소개한 Sales 테이블을 사용합니다. 차트를 추가하기 전에 데이터 원본이 구성되어 있는지 확인하세요.

### 방사형 차트

방사형 차트는 여러 방사형 축에 걸쳐 데이터 포인트를 연결하여 다각형을 형성하므로, 여러 차원에 걸친 값 분포를 비교하는 데 유용합니다.
![Radar chart](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Radar%20chart.87092e.png?width=550)
방사형 차트를 추가하려면 다음 샘플 코드를 참조하세요.

```javascript
// 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](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260402.626ec7-20260529.6b3d99.png?width=600)
채워진 방사형 차트를 추가하려면 다음 샘플 코드를 참조하세요.

```auto
// 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](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Radar%20chart.87092e.png?width=250) | ![image-20260420.025cf7.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.025cf7-20260529.cb861e.png?width=250) |
| 채워진 방사형 차트 | ![image-20260402.626ec7.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260402.626ec7-20260529.dc2bde.png?width=250) | ![image-20260420.cb8bb7.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.cb8bb7-20260529.a3afbd.png?width=250) |

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

**예제**

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