Web Components 차트 선택

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

    Configuring Selection

    기본 동작 selectionMode이 해제되어 있으며 다음 옵션 중 하나를 선택해야 합니다. 다음에서 사용할 수 있는 몇 가지 선택 모드가 있습니다. {ComponentName}​

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

    Brighten 선택한 항목이 FadeOthers 희미해지고 반대 효과가 발생합니다. GrayscaleOthers는 시리즈의 나머지 부분과 FadeOthers 비슷하게 동작하지만 대신 회색으로 표시됩니다. 이렇게 하면 모든 selectionBrush 설정이 재정의됩니다. SelectionColorOutline​ ​SelectionColorThickOutline 시리즈 주위에 테두리를 그립니다.

    이와 함께, a selectionBehavior는 선택되는 항목에 대한 더 큰 제어를 제공하는 데 사용할 수 있습니다. 자동의 기본 동작은 다음과 같습니다 PerSeriesAndDataItemMultiSelect.

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

    Configuring Selection via Color Fill

    다음 예제에서는 와 SelectionColorFill​ ​Auto 선택 동작 PerSeriesAndDataItemMultiSelect의 조합을 보여 줍니다. Color Fills는 전체 시리즈 항목의 배경 색상을 변경할 때 유용한 시각적 신호를 제공합니다. 각 항목을 클릭하면 항목이 녹색에서 보라색으로 변경되는 것을 볼 수 있습니다.

    Configuring Multiple Selection

    다른 선택 모드는 다양한 선택 방법을 제공합니다. 예를 들어 selectionBehavior와 PerDataItemMultiSelect 여러 시리즈가 있는 경우 전체 범주의 모든 시리즈에 영향을 미치며 범주 간에 선택할 수 있습니다. 와 비교 PerDataItemSingleSelect, 한 번에 하나의 항목 범주만 선택할 수 있습니다. 이는 여러 시리즈가 서로 다른 데이터 소스에 바인딩되고 범주 간 선택을 더 잘 제어할 수 있는 경우에 유용합니다. PerSeriesAndDataItemGlobalSingleSelect 한 번에 모든 범주에서 단일 시리즈를 선택할 수 있습니다.

    Configuring Outline Selection

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

    Radial Series Selection

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

    Programmatic Selection

    차트 선택은 차트에서 선택한 항목을 시작 또는 런타임 시 볼 수 있는 코드에서 구성할 수도 있습니다. 이 작업은 항목에 항목을 추가하여 수행할 수 있습니다. SelectedSeriesCollection의 IgcCategoryChartComponent. 이 Matcher의 속성 IgcChartSelection Object를 사용하면 "matcher"를 기반으로 시리즈를 선택할 수 있으며, 차트에서 실제 시리즈에 액세스할 수 없는 경우에 이상적입니다. 데이터 원본에 포함된 속성을 알고 있는 경우 ValueMemberPath 시리즈가 될 것입니다.

    matcher는 와 같은 IgcDataChartComponent 실제 시리즈에 액세스할 수 없는 경우와 같은 IgcCategoryChartComponent 차트에서 사용하는 데 이상적입니다. 이 경우 데이터 원본에 포함된 속성을 알고 있으면 계열에 포함될 ValueMemberPaths를 추측할 수 있습니다. 예를 들어 데이터 소스에 Nuclear, Coal, Oil, Solar 숫자 속성이 있는 경우 이러한 각 속성에 대해 생성된 시리즈가 있음을 알 수 있습니다. Solar 값에 바인딩된 계열을 강조 표시하려면 다음 속성 집합이 있는 matcher를 사용하여 ChartSelection 개체를 컬렉션에 selectedSeriesItems 추가할 수 있습니다

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

    API References

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

    IgcCategoryChartComponent Properties IgcDataChartComponent Properties