# 차트에 다중 선택 추가

## Content

SpreadJS는 차트에 다중 선택을 추가하는 기능을 지원하여 사용자가 선택한 기준에 따라 시각화를 동적으로 변경할 수 있게 합니다. 여러 시나리오를 비교하거나, 특정 카테고리의 성능을 추적하거나, 다양한 요소의 영향을 분석할 때, 데이터 포인트를 대화형으로 선택할 수 있는 기능은 분석의 깊이와 정밀도를 높여줍니다.
차트에서 데이터 소스의 다중 선택은 다음과 같이 작동합니다:

* 첫 번째로 선택된 범위는 기준 데이터 소스로 작동합니다.
* 사용자가 적절한 데이터 방향을 지정하지 않은 경우, 데이터 소스를 고려하여 최적의 방향을 추론합니다.
* 이름 영역(Name area), 범주 영역(Category area), 데이터 영역(Data area)은 각각의 데이터 유형을 기준으로 구분됩니다.

**예**: 아래 스크린샷은 Bears, Whales, Dolphins의 연간 기록 데이터를 보여줍니다. 또한, 선택된 곰과 돌고래 데이터 범위를 다중 선택 옵션을 사용하여 표시한 세로 막대형 차트를 포함합니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.da19b0.png?width=387)
다음 코드 샘플은 다중 선택 옵션을 사용하여 곰과 돌고래의 선택된 데이터 범위를 나타냅니다.

```auto
// 차트 추가
sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 400, 300, "Sheet1!$A$1:$C$2,Sheet1!$A$3:$C$5");
```

또한, 데이터 소스가 차트의 구조와 일치하지 않으면 해당 데이터 소스는 제외되며, 첫 번째 데이터 소스에 숫자가 포함되지 않은 경우에는 이름 영역으로 간주됩니다.
**예**: 다음 스크린샷은 첫 번째 데이터 소스가 문자열로 구성되어 있습니다. 그 결과, 차트는 첫 번째 데이터 소스를 이름 영역으로 사용하고, 선택된 데이터 소스를 범주 영역 및 데이터 영역으로 사용합니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.491a47.png?width=386)

## SpreadJS 디자이너 사용하기

SpreadJS 디자이너에서도 아래 단계에 따라 이 기능을 활성화할 수 있습니다:

1. 데이터 테이블에서 첫 번째 데이터 영역을 선택하고 Ctrl 키를 눌러 다른 필요한 데이터 소스를 선택합니다.
2. 삽입(Insert) > 차트(Charts) 탭 그룹 안에서 데이터에 사용할 차트 유형을 선택합니다.

다음 GIF는 데이터 소스의 다중 선택 옵션을 사용하여 차트를 생성하는 방법을 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/111.f3b174.gif?width=756)