React Data Pie Chart
Ignite UI for React Data 파이 차트는 데이터 집합의 범주(부분)가 총계(전체) 값에 어떻게 합산되는지를 보여주는 전체 간 부분 차트입니다. 범주는 원형 또는 파이 모양의 그래프에서 섹션으로 렌더링됩니다. 각 섹션 또는 원형 조각에는 기본 데이터 값에 비례하는 호 길이가 있습니다. 범주는 분석되는 총 값에 대한 값 백분율을 기준으로 다른 범주에 비례하여 100 또는 100%의 일부로 표시됩니다.
React Data Pie Chart Example
에서 React 파이 차트 XamDataPieChart
항목을 문자열과 숫자 데이터 값으로 바인딩하여 만들 수 있습니다. 이러한 데이터 값의 합은 시각화의 100% 값이 됩니다.
React Data Pie Chart Recommendations
원형 차트는 작은 데이터 세트에 적합하며 한 눈에 쉽게 읽을 수 있습니다. 원형 차트는 부분에서 전체까지의 시각화 유형 중 하나일 뿐입니다. 기타에는 다음이 포함됩니다.
- 도넛(반지)
- 깔때기
- 누적 영역
- 누적 100% 영역(누적 백분율 영역)
- 누적 막대
- 누적 100% 막대(누적 백분율 막대)
- 트리맵
- 폭포
React Data 파이 차트 에는 뷰어에게 데이터를 분석할 수 있는 도구를 제공하는 다음과 같은 대화형 기능이 포함되어 있습니다.
- 전설
- 슬라이스 선택
- Slice Highlighting
- 차트 애니메이션
파이 차트 모범 사례:
- 슬라이스 또는 세그먼트를 전체 값 또는 전체에 비례하는 백분율 값으로 비교합니다.
- 카테고리 그룹이 더 작은 세그먼트로 분할되는 방식을 보여줍니다.
- 소규모의 비계층적 데이터 세트(6~8개 미만의 데이터 세그먼트)를 표시합니다.
- 데이터 세그먼트의 합이 100%가 되도록 보장합니다.
- 데이터의 순서를 가장 큰 것(가장 높은 것)에서 가장 작은 것(가장 작은 것)으로 정렬합니다.
- 12시 위치에서 시작하여 시계 방향으로 계속되는 것과 같은 표준 프레젠테이션 기술을 사용합니다.
- 부품의 세그먼트/슬라이스에 대해 색상 팔레트를 구별할 수 있는지 확인합니다.
- 쉽게 읽을 수 있도록 세그먼트와 범례의 데이터 레이블을 고려합니다.
- 이해의 용이성을 기준으로 Bar 또는 Ring과 같은 Pie 차트를 대체할 차트를 선택합니다.
- 비교 분석을 위해 여러 원형 차트를 나란히 배치하는 것을 피하세요.
다음과 같은 경우 파이 차트 사용하지 마십시오.
- 시간에 따른 변화 비교 - 막대, 선 또는 영역 차트를 사용합니다.
- 정확한 데이터 비교가 필요한 경우 막대, 선 또는 영역 차트를 사용하세요.
- 6개 또는 8개 이상의 세그먼트(높은 데이터 볼륨)가 있습니다. 데이터 스토리에 적합한 경우 막대, 선 또는 영역 차트를 고려하십시오.
- 막대 차트에서 값 차이를 보는 사람이 더 쉽게 인식할 수 있습니다.
React Data Pie Chart Legend
범례는 각 포인트에 대한 정보를 표시하고 총 합계에 대한 기여도를 아는 데 사용됩니다.
원형 차트 옆에 범례를 표시하려면 ItemLegend를 만들어 속성에 IgrLegend
할당해야 합니다. ItemLegend는 기본적으로 항목을 세로 방향으로 표시하지만 속성을 설정하여 orientation
변경할 수 있습니다.
범례에 표시된 레이블은 기본적으로 각 조각 XamDataPieChart
에 대해 표시되는 레이블과 동일한 콘텐츠를 표시하지만 차트의 LegendSliceLabelContentMode
속성을 사용하여 수정할 수 있습니다. 이렇게 하면 레이블, 값, 백분율 또는 이들의 조합을 차트의 각 조각에 대한 범례의 내용으로 표시할 수 있는 열거형이 노출됩니다.
ItemLegend 배지를 수정할 수도 있습니다. 기본적으로 연결된 차트 조각의 색에 해당하는 채워진 원으로 나타납니다. 차트의 속성을 사용하여 legendItemBadgeShape
이를 구성할 수 있으며 원, 선, 막대, 열 등으로 설정할 수 있습니다.
다음은 ItemLegend를 와 함께 XamDataPieChart
사용하는 방법을 보여주는 예입니다.
React 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
React 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
React 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
.
이러한 조건이 충족되면 하위 집합의 값이 강조 표시되고 전체 데이터 집합의 나머지 부분은 흐리게 표시되어 하위 집합에 대한 강조 표시가 효과적으로 만들어지고 동일한 컨트롤 내에서 데이터의 하위 집합을 더 쉽게 시각화할 수 있습니다.
React Data Pie Chart Animation
이 XamDataPieChart
기능은 조각에 애니메이션을 적용하고 값이 변경될 때도 애니메이션을 적용할 수 있도록 지원합니다.
를 설정할 수 있습니다. IsTransitionInEnabled
속성을 참을 클릭하여 원형 차트가 보기에 애니메이션을 적용합니다. 수행되는 애니메이션 유형은 다음을 설정하여 구성할 수 있습니다. TransitionInMode
enumerated 속성을 보고 싶은 애니메이션 유형으로 변경합니다. 또한 다음을 설정할 수도 있습니다. TransitionInSpeedType
속성을 사용하여 index, value, normal 또는 randomized로 크기를 조정할 수 있습니다. 이 애니메이션의 지속 시간은 다음과 같이 제어할 수 있습니다. TransitionInDuration
속성을 사용합니다. TimeSpan
.
데이터 변경 사항을 애니메이션하려면 다음을 설정하여 이 작업을 수행할 수도 있습니다. animateSeriesWhenAxisRangeChanges
속성을 참. 이 변경 기간은 다음을 설정하여 구성할 수 있습니다. TransitionDuration
재산뿐만 아니라.
다음 샘플에서는 애니메이션을 사용하는 방법을 보여 줍니다. XamDataPieChart
Additional Resources
API References
다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.
OthersCategoryThreshold
OthersCategoryType
SelectionMode
차트 종류 | 컨트롤 이름 | API 회원 |
---|---|---|
데이터 파이 차트 | XamDataPieChart |
XamDataPieChart |
Item Legend | IgrItemLegend |
IgrItemLegend |