React Chart Selection
React {ComponentTitle}의 Ignite UI for React 하면 사용자가 차트 내에서 단일 또는 여러 시리즈를 대화형으로 선택, 강조, 윤곽선 지정 및 그 반대로 선택 해제할 수 있습니다. 이를 통해 사용자가 보다 의미 있는 방식으로 제시된 데이터와 상호 작용하는 방법에 대한 다양한 가능성이 제공됩니다.
Configuring Selection
The default behavior selectionMode turned off and requires opting into one of the following options. There are several selection modes available in the {ComponentName}:
- Auto
- 없음
- Brighten
- 페이드Others
- 그레이스케일기타
- FocusColorThickOutline (영문)
- FocusColorOutline
- SelectionColorThickOutline (영문)
- SelectionColorOutline
- FocusColorFill
- SelectionColorFill (영문)
- 두껍게 외곽선
Brighten will fade the selected item while FadeOthers will cause the opposite effect occur.
GrayscaleOthers will behave similarly to FadeOthers but instead show a gray color to the rest of the series. Note this will override any selectionBrush setting.
SelectionColorOutline and SelectionColorThickOutline will draw a border around the series.
In conjunction, a selectionBehavior is available to provide greater control on which items get selected. The default behavior for Auto is PerSeriesAndDataItemMultiSelect.
- Auto
- PerDataItemMultiSelect
- PerDataItemSingleSelect
- PerSeriesAndDataItemMultiSelect
- PerSeriesAndDataItemSingleSelect
- PerSeriesAndDataItemGlobalSingleSelect
- PerSeriesMultiSelect
- PerSeriesSingleSelect (영문)
Configuring Selection via Color Fill
The following example shows the combination of both SelectionColorFill and Auto selection behavior aka PerSeriesAndDataItemMultiSelect. Color Fills provide a useful visual cue as it changes the entire series item's back color. By clicking each item you'll see the item change from green to purple.
Configuring Multiple Selection
Other selection modes offer various methods of selection. For example using selectionBehavior with PerDataItemMultiSelect will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to PerDataItemSingleSelect, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories.
PerSeriesAndDataItemGlobalSingleSelect allows single series selection across all categories at a time.
Configuring Outline Selection
When focusBrush is applied, selected series will appear with a border when the selectionMode property is set to one of the focus options.
Radial Series Selection
This example demonstrates another series type via the IgrDataChart where each radial series can be selected with different colors.
Programmatic Selection
Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the SelectedSeriesCollection of the IgrCategoryChart. The Matcher property of the IgrChartSelection object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the ValueMemberPath that the series would be.
The matcher is ideal for using in charts, such as the IgrCategoryChart when you do not have access to the actual series, like the IgrDataChart. In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the selectedSeriesItems collection using a matcher with the following properties set
예를 들어 데이터 소스에 Nuclear, Coal, Oil, Solar 숫자 속성이 있는 경우 이러한 각 속성에 대해 생성된 시리즈가 있음을 알 수 있습니다. Solar 값에 바인딩된 계열을 선택하려는 경우 다음 속성 집합이 있는 검사기를 사용하여 SelectedSeriesItems 컬렉션에 ChartSelection 개체를 추가할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
IgrCategoryChart Properties |
IgrDataChart Properties |
|---|---|