Web Components 데이터 파이 차트

    Ignite UI for Web Components Data 파이 차트는 데이터 집합의 범주(부분)가 총계(전체) 값에 어떻게 합산되는지를 보여주는 전체 간 부분 차트입니다. 범주는 원형 또는 파이 모양의 그래프에서 섹션으로 렌더링됩니다. 각 섹션 또는 원형 조각에는 기본 데이터 값에 비례하는 호 길이가 있습니다. 범주는 분석되는 총 값에 대한 값 백분율을 기준으로 다른 범주에 비례하여 100 또는 100%의 일부로 표시됩니다.

    Web Components Data Pie Chart Example

    에서 Web Components 파이 차트 XamDataPieChart 항목을 문자열과 숫자 데이터 값으로 바인딩하여 만들 수 있습니다. 이러한 데이터 값의 합은 시각화의 100% 값이 됩니다.

    Web Components Data Pie Chart Recommendations

    원형 차트는 작은 데이터 세트에 적합하며 한 눈에 쉽게 읽을 수 있습니다. 원형 차트는 부분에서 전체까지의 시각화 유형 중 하나일 뿐입니다. 기타에는 다음이 포함됩니다.

    • 도넛(반지)
    • 깔때기
    • 누적 영역
    • 누적 100% 영역(누적 백분율 영역)
    • 누적 막대
    • 누적 100% 막대(누적 백분율 막대)
    • 트리맵
    • 폭포

    Web Components Data 파이 차트 에는 뷰어에게 데이터를 분석할 수 있는 도구를 제공하는 다음과 같은 대화형 기능이 포함되어 있습니다.

    • 전설
    • 슬라이스 선택
    • Slice Highlighting
    • 차트 애니메이션

    파이 차트 모범 사례:

    • 슬라이스 또는 세그먼트를 전체 값 또는 전체에 비례하는 백분율 값으로 비교합니다.
    • 카테고리 그룹이 더 작은 세그먼트로 분할되는 방식을 보여줍니다.
    • 소규모의 비계층적 데이터 세트(6~8개 미만의 데이터 세그먼트)를 표시합니다.
    • 데이터 세그먼트의 합이 100%가 되도록 보장합니다.
    • 데이터의 순서를 가장 큰 것(가장 높은 것)에서 가장 작은 것(가장 작은 것)으로 정렬합니다.
    • 12시 위치에서 시작하여 시계 방향으로 계속되는 것과 같은 표준 프레젠테이션 기술을 사용합니다.
    • 부품의 세그먼트/슬라이스에 대해 색상 팔레트를 구별할 수 있는지 확인합니다.
    • 쉽게 읽을 수 있도록 세그먼트와 범례의 데이터 레이블을 고려합니다.
    • 이해의 용이성을 기준으로 Bar 또는 Ring과 같은 Pie 차트를 대체할 차트를 선택합니다.
    • 비교 분석을 위해 여러 원형 차트를 나란히 배치하는 것을 피하세요.

    다음과 같은 경우 파이 차트 사용하지 마십시오.

    • 시간에 따른 변화 비교 - 막대, 선 또는 영역 차트를 사용합니다.
    • 정확한 데이터 비교가 필요한 경우 막대, 선 또는 영역 차트를 사용하세요.
    • 6개 또는 8개 이상의 세그먼트(높은 데이터 볼륨)가 있습니다. 데이터 스토리에 적합한 경우 막대, 선 또는 영역 차트를 고려하십시오.
    • 막대 차트에서 값 차이를 보는 사람이 더 쉽게 인식할 수 있습니다.

    Web Components Data Pie Chart Legend

    범례는 각 포인트에 대한 정보를 표시하고 총 합계에 대한 기여도를 아는 데 사용됩니다.

    원형 차트 옆에 범례를 표시하려면 ItemLegend를 만들어 속성에 IgcLegendComponent 할당해야 합니다. ItemLegend는 기본적으로 항목을 세로 방향으로 표시하지만 속성을 설정하여 orientation 변경할 수 있습니다.

    범례에 표시된 레이블은 기본적으로 각 조각 XamDataPieChart에 대해 표시되는 레이블과 동일한 콘텐츠를 표시하지만 차트의 LegendSliceLabelContentMode 속성을 사용하여 수정할 수 있습니다. 이렇게 하면 레이블, 값, 백분율 또는 이들의 조합을 차트의 각 조각에 대한 범례의 내용으로 표시할 수 있는 열거형이 노출됩니다.

    ItemLegend 배지를 수정할 수도 있습니다. 기본적으로 연결된 차트 조각의 색에 해당하는 채워진 원으로 나타납니다. 차트의 속성을 사용하여 legendItemBadgeShape 이를 구성할 수 있으며 원, 선, 막대, 열 등으로 설정할 수 있습니다.

    다음은 ItemLegend를 와 함께 XamDataPieChart 사용하는 방법을 보여주는 예입니다.

    Web Components Pie Chart Others Category

    경우에 따라 원형 차트의 기본 데이터에는 값이 작은 많은 항목이 포함됩니다. 이 경우 Others 범주를 사용하면 여러 데이터 값을 단일 조각으로 자동 집계할 수 있습니다.

    의 XamDataPieChart Others 범주에는 구성 가능한 세 가지 기본 속성 -OthersCategoryType, OthersCategoryThreshold이 OthersCategoryText 속성을 사용하여 차트에서 Others 조각이 표시되는 방식을 구성할 수 있습니다. 이러한 내용은 각각 아래에 설명되어 있습니다.

    속성은 OthersCategoryType의 XamDataPieChart 속성과 OthersCategoryThreshold 함께 작동합니다. 의 OthersCategoryType 경우 를 OthersCategoryThreshold 숫자 또는 백분율로 평가할지 여부를 정의할 수 있습니다. 예를 들어, 숫자를 결정하고 를 OthersCategoryThreshold 5로 설정하면 값이 5보다 작은 모든 조각은 기타 범주의 일부가 됩니다. 퍼센트 유형에 동일한 값 5를 사용하면 총 값 XamDataPieChart의 5% 미만인 모든 값은 기타 범주의 일부가 됩니다.

    기본적으로 Others 조각은 "Others"라는 레이블로 표시됩니다. 차트의 속성을 수정 OthersCategoryText 하여 이를 변경할 수 있습니다.

    기타 범주가 에 XamDataPieChart 표시되지 않도록 하려면 를 OthersCategoryThreshold 0으로 설정할 수 있습니다.

    다음 샘플에서는 Others 슬라이스를 사용하는 방법을 보여 줍니다. XamDataPieChart​

    Web Components Data Pie Chart Selection

    ​XamDataPieChart 차트에 표시된 슬라이스를 마우스 클릭으로 슬라이스 선택을 지원합니다. 이는 아래에 설명된 차트의 SelectionBehavior 및 SelectionMode 속성을 활용하여 구성할 수 있습니다.

    의 주요 두 가지 옵션은 SelectionBehavior and PerDataItemMultiSelect 이며 PerDataItemSingleSelect, 각각 단일 및 다중 선택을 가능하게 합니다.

    이 속성은 원형 차트 조각이 SelectionMode 선택될 때 어떻게 반응하는지를 결정하는 열거형을 노출합니다. 다음은 해당 열거형의 옵션과 해당 옵션의 작업입니다.

    • Brighten: 선택한 슬라이스가 강조 표시됩니다.
    • FadeOthers: 선택한 슬라이스는 동일한 색상으로 유지되고 다른 슬라이스는 흐려집니다.
    • FocusColorFill: 선택한 조각의 배경이 차트의 FocusBrush로 변경됩니다.
    • FocusColorOutline: 선택한 조각에는 차트의 FocusBrush에 의해 정의된 색상의 윤곽선이 있습니다.
    • FocusColorThickOutline: 선택한 조각에는 차트의 FocusBrush에 의해 정의된 색상의 윤곽선이 있습니다. 이 윤곽선의 두께는 컨트롤의 Thickness 속성을 통해서도 구성할 수 있습니다.
    • GrayscaleOthers: 선택하지 않은 슬라이스에는 회색 필터가 적용됩니다.
    • None: 선택한 슬라이스에는 효과가 없습니다.
    • SelectionColorFill: 선택한 조각의 배경이 차트의 SelectionBrush로 변경됩니다.
    • SelectionColorOutline: 선택한 조각에는 차트의 SelectionBrush에 의해 정의된 색의 윤곽선이 있습니다.
    • SelectionColorThickOutline: 선택한 조각에는 차트의 FocusBrush에 의해 정의된 색상의 윤곽선이 있습니다. 이 윤곽선의 두께는 컨트롤의 Thickness 속성을 통해서도 구성할 수 있습니다.
    • ThickOutline: 선택한 조각은 차트의 Thickness 속성에 따라 두께가 달라지는 윤곽선을 적용합니다.

    조각을 선택하면 해당 기본 데이터 항목이 차트의 SelectedSeriesItems 컬렉션에 추가됩니다. 따라서 XamDataPieChart는 SelectedSeriesItemsChanged 이벤트를 노출하여 조각이 선택되고 이 컬렉션이 변경된 경우를 감지합니다.

    다음 샘플에서는 컨트롤의 선택 기능을 보여 줍니다. XamDataPieChart​

    Web Components Data Pie Chart Highlighting

    강조 표시에 XamDataPieChart 대한 마우스 표시를 지원하며 별도의 데이터 소스를 제공하여 구성할 수 있는 강조 표시 오버레이를 지원합니다.

    먼저, highlightingBehavior enumerated 속성은 조각이 강조 표시되는 방식을 결정합니다. 다음은 해당 속성의 옵션과 그 역할입니다.

    • DirectlyOver: 슬라이스는 마우스가 슬라이스 바로 위에 있을 때만 강조 표시됩니다.
    • NearestItems: 마우스 위치에 가장 가까운 슬라이스가 강조 표시됩니다.
    • NearestItemsAndSeries: 마우스 위치에 가장 가까운 슬라이스와 시리즈가 강조 표시됩니다.
    • NearestItemsRetainMainShapes: 마우스 위치에 가장 가까운 항목이 강조 표시되고 시리즈의 기본 모양은 강조가 줄어들지 않습니다.

    ​highlightingMode enumerated 속성은 데이터 파이 차트 조각이 강조 표시될 때 응답하는 방식을 결정합니다. 다음은 해당 속성의 옵션과 그 역할입니다.

    • Brighten: 시리즈의 마우스 위치가 위나 근처에 있을 때 색상이 밝아집니다.
    • BrightenSpecific: 특정 슬라이스는 마우스 위치가 그 위에 있거나 근처에 있을 때 색상이 밝아집니다.
    • FadeOthers: 시리즈는 마우스 위치가 그 위나 근처에 있을 때 색상을 유지하고 다른 시리즈는 흐리게 나타납니다.
    • FadeOthersSpecific: 특정 슬라이스는 마우스 위치가 그 위나 근처에 있을 때 색상을 유지하지만 다른 슬라이스는 흐리게 나타납니다.
    • None: 시리즈와 슬라이스가 강조 표시되지 않습니다.

    다음 예제에서는 구성 요소의 마우스 강조 표시 동작을 XamDataPieChart 보여 줍니다.

    마우스 강조 표시 외에도 XamDataPieChart 데이터의 하위 집합을 표시할 수 있는 강조 표시 필터 기능을 노출합니다. 이는 다음을 지정하여 적용됩니다. HighlightedDataSource 제어를 위해 그리고 설정함으로써 highlightedValuesDisplayMode 속성을 Overlay. 이 HighlightedDataSource에 할당된 데이터의 하위 집합이 필요합니다. DataSource의 속성 XamDataPieChart.

    이러한 조건이 충족되면 하위 집합의 값이 강조 표시되고 전체 데이터 집합의 나머지 부분은 흐리게 표시되어 하위 집합에 대한 강조 표시가 효과적으로 만들어지고 동일한 컨트롤 내에서 데이터의 하위 집합을 더 쉽게 시각화할 수 있습니다.

    Web Components Data Pie Chart Animation

    이 XamDataPieChart 기능은 조각에 애니메이션을 적용하고 값이 변경될 때도 애니메이션을 적용할 수 있도록 지원합니다.

    를 설정할 수 있습니다. IsTransitionInEnabled 속성을 참을 클릭하여 원형 차트가 보기에 애니메이션을 적용합니다. 수행되는 애니메이션 유형은 다음을 설정하여 구성할 수 있습니다. TransitionInMode enumerated 속성을 보고 싶은 애니메이션 유형으로 변경합니다. 또한 다음을 설정할 수도 있습니다. TransitionInSpeedType 속성을 사용하여 index, value, normal 또는 randomized로 크기를 조정할 수 있습니다. 이 애니메이션의 지속 시간은 다음과 같이 제어할 수 있습니다. TransitionInDuration 속성을 사용합니다. TimeSpan.

    데이터 변경 사항을 애니메이션하려면 다음을 설정하여 이 작업을 수행할 수도 있습니다. animateSeriesWhenAxisRangeChanges 속성을 참. 이 변경 기간은 다음을 설정하여 구성할 수 있습니다. TransitionDuration 재산뿐만 아니라.

    다음 샘플에서는 애니메이션을 사용하는 방법을 보여 줍니다. XamDataPieChart​

    Additional Resources

    API References

    다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.

    차트 종류 컨트롤 이름 API 회원
    데이터 파이 차트 XamDataPieChart XamDataPieChart
    Item Legend IgcItemLegendComponent IgcItemLegendComponent