[]
FlexChart, FlexPie, FlexRadar, Sunburst 컨트롤은 클릭하거나 터치하여 계열(Series)이나 데이터 포인트들을 선택할 수 있습니다. SelectionMode속성을 사용하여 계열(Series)별, 데이터 포인트별 또는 선택하지 않을지를 정합니다(선택은 기본값에 의해 비활성화됩니다).
myChart.selectionMode: 'Series';
지원되는 선택 모드:
주의사항:
SelectionMode 속성을 Series 또는 Point로 설정하면 사용자가 마우스를 클릭할 때 FlexChart가 Selection 속성을 업데이트하고 선택한 차트 요소들에 "wj-state-selected" 클래스를 적용합니다.
.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 이벤트는 선택 항목이 변경된 후 사용자가 차트를 클릭할 때 프로그래밍 방식으로 변경됩니다. 이 기능은, 예를 들어 현재 선택 항목을 표시하는 텍스트 박스에서 세부 정보를 업데이트하려는 경우에 유용합니다.
import * as chart from '@grapecity/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 컨트롤을 사용하면 파이 슬라이스를 클릭하거나 터치하여 데이터 포인트들을 선택할 수 있습니다. 이 선택 동작은 FlexChart와는 약간 다릅니다. FlexChart와 마찬가지로, selectionMode 속성을 사용하여 데이터 포인트별 선택을 허용할지 아니면 아예 선택하지 않을지 지정합니다(기본값).
FlexPie는 선택 항목을 사용자 정의할 수 있는 세 가지 추가 속성을 제공합니다:
예시:
myChart.isAnimated = true;
myChart.selectionMode = 'Point';
myChart.selectedItemOffset = 0.2;
myChart.selectedItemPosition = 'Top';