# 차트 선택

## Content

FlexChart, FlexPie, FlexRadar, Sunburst 컨트롤은 클릭하거나 터치하여 계열(Series)이나 데이터 포인트들을 선택할 수 있습니다. **SelectionMode**속성을 사용하여 계열(Series)별, 데이터 포인트별 또는 선택하지 않을지를 정합니다(선택은 기본값에 의해 비활성화됩니다).

```JavaScript
myChart.selectionMode: 'Series';
```

지원되는 선택 모드:

* **Point**: 사용자가 차트에서 클릭할 때 데이터 포인트를 선택합니다.
* **Series**: 사용자가 차트에서 클릭할 때 전체 계열(Series)을 선택합니다.
* **None**: 사용자가 차트를 클릭할 때 계열(Series)이나 데이터 포인트를 선택하지 않습니다.

주의사항:

* 선, 공간, 스플라인, SplineArea 차트들은 개별 데이터 포인트들을 렌더링하지 않으므로 **포인트** 선택 모드를 사용할 때는 아무것도 선택되지 않습니다.
* TreeMap 컨트롤에서는 선택 모드가 작동하지 않습니다.

## 선택 항목 스타일링

SelectionMode 속성을 **Series** 또는 **Point**로 설정하면 사용자가 마우스를 클릭할 때 FlexChart가 **Selection** 속성을 업데이트하고 선택한 차트 요소들에 "wj-state-selected" 클래스를 적용합니다.

```CSS
.wj-flexchart .wj-state-selected {
  stroke: rgba(0,0,0,.5);
  stroke-width: 3;
  stroke-dasharray: 1;
}
```

## 선택 항목 작업

차트 선택 메커니즘은 Collection View 클래스를 기반으로 하므로, 동일한 데이터 소스에 다수의 컨트롤이 연결된 경우 선택 항목이 자동으로 동기화됩니다.

**Selection** 속성은 현재 선택한 계열(Series)들을 반환합니다. 현재 선택한 데이터 포인트를 가져오려면 보여준 예시와 같이 **Series.collectionView.currentItem** 특성을 사용하여 선택한 계열(Series)들 내에서 현재 선택한 항목을 가져옵니다.

*SelectionChanged* 이벤트는 선택 항목이 변경된 후 사용자가 차트를 클릭할 때 프로그래밍 방식으로 변경됩니다. 이 기능은, 예를 들어 현재 선택 항목을 표시하는 텍스트 박스에서 세부 정보를 업데이트하려는 경우에 유용합니다.

```JavaScript
import * as chart from '@mescius/wijmo.chart';

// create the chart
var theChart = new chart.FlexChart('#theChart', {
    selectionMode: 'Point', // enable selection
    selectionChanged: function(s, e) {
        if (s.selection) {
            var point = s.selection.collectionView.currentItem;
            // get text value from data point
            // var text =
            }
        }
    });
```

## FlexPie 선택

FlexPie 컨트롤을 사용하면 파이 슬라이스를 클릭하거나 터치하여 데이터 포인트들을 선택할 수 있습니다. 이 선택 동작은 FlexChart와는 약간 다릅니다. FlexChart와 마찬가지로, **selectionMode** 속성을 사용하여 데이터 포인트별 선택을 허용할지 아니면 아예 선택하지 않을지 지정합니다(기본값).

FlexPie는 선택 항목을 사용자 정의할 수 있는 세 가지 추가 속성을 제공합니다:

* **selectedItemOffset**: 컨트롤 중앙에서 선택한 파이 슬라이스의 오프셋을 지정합니다.
* **selectedItemPosition**: 선택한 파이 슬라이스의 위치를 지정합니다. 사용 가능한 옵션은 상단, 하단, 왼쪽, 오른쪽 및 없음(기본값)입니다.
* **isAnimated**: 선택 항목을 애니메이션화 할지의 여부를 결정합니다.

예시:

```JavaScript
myChart.isAnimated = true;
myChart.selectionMode = 'Point';
myChart.selectedItemOffset = 0.2;
myChart.selectedItemPosition = 'Top';
```

![advanced-chart-flexpie-selection](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/f0e94a5a-9d66-4b7c-8611-81d5cbaf01b7/advanced-chart-flexpie-selection.d5d816.png)