React Chart Selection

    React {ComponentTitle}의 Ignite UI for React 하면 사용자가 차트 내에서 단일 또는 여러 시리즈를 대화형으로 선택, 강조, 윤곽선 지정 및 그 반대로 선택 해제할 수 있습니다. 이를 통해 사용자가 보다 의미 있는 방식으로 제시된 데이터와 상호 작용하는 방법에 대한 다양한 가능성이 제공됩니다.

    Configuring Selection

    기본 동작selectionMode이 꺼져 있으며 다음 옵션 중 하나에 선택해야 합니다. 다음과 같은 여러 선택 모드{ComponentName}가 제공됩니다:

    • Auto
    • 없음
    • Brighten
    • 페이드Others
    • 그레이스케일기타
    • FocusColorThickOutline (영문)
    • FocusColorOutline
    • SelectionColorThickOutline (영문)
    • SelectionColorOutline
    • FocusColorFill
    • SelectionColorFill (영문)
    • 두껍게 외곽선

    Brighten선택된 아이템을 사라지게 하는 반면,FadeOthers 반대 효과가 발생합니다.GrayscaleOthers 시리즈의 나머지 부분과FadeOthers 비슷하게 행동하지만 대신 회색으로 표시됩니다. 이 설정은 모든selectionBrush 설정을 덮어쓰는 데 사용하세요.SelectionColorOutline​SelectionColorThickOutline 그리고 시리즈에 경계선을 그을 것입니다.

    이와 함께 aselectionBehavior는 어떤 항목이 선택될지 더 큰 제어권을 제공합니다. 자동 모드의 기본 동작은 다음과 같습니다PerSeriesAndDataItemMultiSelect.

    • Auto
    • PerDataItemMultiSelect
    • PerDataItemSingleSelect
    • PerSeriesAndDataItemMultiSelect
    • PerSeriesAndDataItemSingleSelect
    • PerSeriesAndDataItemGlobalSingleSelect
    • PerSeriesMultiSelect
    • PerSeriesSingleSelect (영문)

    Configuring Selection via Color Fill

    다음 예시는 두 가지SelectionColorFill의 조합과Auto 선택 행동, 즉PerSeriesAndDataItemMultiSelect 컬러 필은 전체 시리즈의 뒷면을 바꾸는 유용한 시각적 단서를 제공합니다. 각 아이템을 클릭하면 아이템이 초록색에서 보라색으로 바뀌는 것을 볼 수 있습니다.

    Configuring Multiple Selection

    다른 선택 방식들은 다양한 선택 방식을 제공합니다. 예를 들어,selectionBehavior와PerDataItemMultiSelect 여러 시리즈가 존재할 경우 전체 카테고리 내 모든 시리즈에 영향을 미치며, 카테고리 간 선택이 가능합니다. 비교PerDataItemSingleSelect, 한 번에 선택할 수 있는 항목 범주는 단 하나뿐입니다. 이는 여러 시리즈가 서로 다른 데이터소스에 묶여 있을 때 유용하며, 카테고리 간 선택을 더 잘 제어할 수 있게 해줍니다.PerSeriesAndDataItemGlobalSingleSelect 모든 카테고리에서 단일 시리즈를 선택할 수 있습니다.

    Configuring Outline Selection

    적용 시focusBrush 선택한 시리즈는 포커스 옵션 중 하나로 설정되면selectionMode 테두리와 함께 나타납니다.

    Radial Series Selection

    이 예시는 각IgrDataChart 방사형 시리즈를 서로 다른 색상으로 선택할 수 있는 또 다른 시리즈를 보여줍니다.

    Programmatic Selection

    차트 선택은 코드로 설정할 수도 있어, 차트 내 선택된 항목들이 시작 시 또는 런타임에 볼 수 있습니다. 이는 다음 항목들을 추가함으로써 달성할 수 있습니다.SelectedSeriesCollection​IgrCategoryChart. 그Matcher​IgrChartSelection Object는 "매처"를 기반으로 시리즈를 선택할 수 있게 해주는데, 이는 차트에서 실제 시리즈에 접근할 수 없을 때 이상적입니다. 데이터소스가 포함하는 속성을 알고 있다면, 다음을 사용할 수 있습니다.ValueMemberPath 시리즈가 그렇게 될 거라고.

    매처는 실제 시리즈에 접근할 수 없을 때 차트에서IgrCategoryChart 사용하는 데 이상적입니다.IgrDataChart이 경우, 데이터소스가 포함한 속성을 알면 그 시리즈가 가질 ValueMemberPaths를 추측할 수 있습니다. 예를 들어, 데이터소스에 원자력, 석탄, 석유, 태양광 같은 수치 속성이 있다면, 각 속성에 대해 수열이 생성된다는 것을 알 수 있습니다. Solar 값에 묶인 시리즈를 하이라이트하고 싶다면, 다음과 같은 속성이 설정된 매처를 사용해 ChartSelection 객체를 컬렉션에selectedSeriesItems 추가할 수 있습니다

    예를 들어 데이터 소스에 Nuclear, Coal, Oil, Solar 숫자 속성이 있는 경우 이러한 각 속성에 대해 생성된 시리즈가 있음을 알 수 있습니다. Solar 값에 바인딩된 계열을 선택하려는 경우 다음 속성 집합이 있는 검사기를 사용하여 SelectedSeriesItems 컬렉션에 ChartSelection 개체를 추가할 수 있습니다.

    API References

    다음은 위 섹션에서 언급된 API 멤버 목록입니다.

    IgrCategoryChart Properties IgrDataChart Properties