Web Components 차트 강조 표시 필터

    Ignite UI for Web Components 차트 구성 요소는 그려진 데이터의 하위 집합을 볼 수 있도록 하여 해당 차트에 그려진 계열의 시각화를 향상시킬 수 있는 데이터 강조 오버레이를 지원합니다. 활성화하면 데이터의 하위 집합이 강조 표시되고 열 및 영역 계열 유형의 경우 불투명도가 감소된 전체 집합이 표시되고 선 계열 유형의 경우 점선이 표시됩니다. 이렇게 하면 데이터 집합으로 목표 값과 실제 값 등을 시각화하는 데 도움이 될 수 있습니다. 이 기능은 다음 예제에 설명되어 있습니다.

    데이터 강조 기능은 IgcDataChartComponent 그리고 IgcCategoryChartComponent 하지만 해당 컨트롤의 작동 방식의 특성으로 인해 해당 컨트롤에서 다른 방식으로 구성됩니다. 하지만 이 기능에서 한 가지 변하지 않는 것은 highlightedValuesDisplayMode property 를 Overlay 하이라이트를 보고 싶다면. 다음은 하이라이트 필터 기능의 다양한 구성에 대해 설명합니다.

    Using Highlight Filter with DataChart

    에서 IgcDataChartComponent 강조 필터 API의 대부분은 주로 강조 표시하려는 데이터의 하위 집합을 나타내는 컬렉션으로 HighlightedItemsSource 속성을 설정하여 계열 자체에서 발생합니다. 의 HighlightedItemsSource 항목 수는 강조 표시하려는 시리즈에 바인딩 ItemsSource 된 데이터 수와 일치해야하며 범주 시리즈의 경우 기본적으로 강조 표시 경로로 정의한 항목을 사용합니다 ValueMemberPath. 이 페이지의 맨 위에 있는 샘플에서는 in을 HighlightedItemsSource​ ​IgcDataChartComponent 사용하여 오버레이를 표시합니다.

    스키마가 계열의 the와 the HighlightedItemsSource​ ​ItemsSource 간에 일치하지 않는 경우 계열의 속성을 사용하여 HighlightedValueMemberPath 구성할 수 있습니다. 또한 시리즈 자체를 하이라이트 소스로 사용하고 ItemsSource 하위 집합을 나타내는 데이터 항목에 경로가 있는 경우 이 작업을 수행할 수 있습니다. 이 작업은 속성을 해당 경로로 설정하고 HighlightedValueMemberPath a HighlightedItemsSource를 제공하지 않음으로써 수행됩니다.

    column 및 area 계열 형식의 불투명도를 줄이면 계열에서 속성을 설정하여 highlightedValuesFadeOpacity 구성할 수 있습니다. 오버레이를 highlightedValuesDisplayMode 전혀 않으려는 경우 속성을 로 Hidden 설정할 수도 있습니다.

    강조 표시 필터로 표시되는 계열 부분은 차트의 범례 및 도구 설명 레이어에 별도로 표시됩니다. 툴팁과 범례에 주어지는 제목은 를 highlightedTitleSuffix 설정하여 설정할 수 있습니다. 이렇게 하면 제공한 값이 계열의 끝에 chartTitle 추가됩니다.

    만약에 DataLegend 또는 IgcDataToolTipLayerComponent가 사용되면 강조 표시된 시리즈가 그룹화되어 나타납니다. 이것은 설정하여 관리할 수 있습니다. HighlightedValuesDataLegendGroup 속성을 사용하여 적절하게 분류할 수 있습니다.

    다음 예제에서는 다음을 사용하여 컨트롤 내에서 IgcDataChartComponent 데이터 범례 그룹화 및 강조 표시 오버레이 기능을 사용하는 방법을 보여 줍니다. HighlightedValuesDataLegendGroup​

    다음 예제에서는 다음을 사용하여 컨트롤 내에서 IgcDataChartComponent 데이터 범례 그룹화 및 강조 표시 오버레이 기능을 사용하는 방법을 보여 줍니다. HighlightedValuesDataLegendGroup​

    다음 예제에서는 다음을 사용하여 컨트롤 내에서 IgcDataChartComponent 데이터 강조 표시 오버레이 기능을 사용하는 방법을 보여 줍니다. HighlightedValueMemberPath​

    Using Highlight Filter in CategoryChart

    강조 표시 필터는 IgcCategoryChartComponent 속성을 설정하여 initialHighlightFilter 차트에서 발생합니다. 는 IgcCategoryChartComponent 기본적으로 기본 데이터 항목의 모든 속성을 고려하므로 필터링할 데이터의 하위 집합을 가질 수 있는 방식으로 데이터를 그룹화하고 집계할 수 있도록 차트에서도 를 initialGroups 정의해야 합니다. 기본 데이터 항목의 값 경로로 설정하여 initialGroups 중복 값이 있는 경로로 그룹화할 수 있습니다.

    와 IgcDataChartComponent 마찬가지로 속성도 highlightedValuesDisplayMode에 IgcCategoryChartComponent 노출됩니다. 오버레이를 표시하지 않으려는 경우 이 속성을 로 설정할 수 있습니다 Hidden.

    다음 예제에서는 컨트롤 내에서 데이터 강조 오버레이 기능을 사용하는 방법을 보여 줍니다 IgcCategoryChartComponent.

    Additional Resources

    다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.

    API References

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

    IgcCategoryChartComponent Properties IgcDataChartComponent Properties
    CategoryChart.HighlightedItemsSource Series.HighlightedItemsSource
    highlightedTitleSuffix highlightedTitleSuffix
    CategoryChart.HighlightedValueMemberPath Series.HighlightedValueMemberPath
    highlightedValuesDisplayMode highlightedValuesDisplayMode
    highlightedValuesFadeOpacity highlightedValuesFadeOpacity
    highlightedValuesDisplayMode highlightedValuesDisplayMode
    initialHighlightFilter
    initialGroups