Angular 파이 차트

Ignite UI for Angular 파이 차트, 또는 파이 그래프는 데이터 집합의 범주(부분)가 총(전체) 값에 어떻게 합산되는지 보여주는 부분 대 전체 차트입니다. 카테고리는 원형 또는 파이 모양의 그래프에서 섹션으로 렌더링됩니다. 각 섹션 또는 파이 슬라이스는 기본 데이터 값에 비례하는 호 길이를 갖습니다. 카테고리는 분석 중인 총 값에 대한 해당 값의 백분율에 따라 다른 카테고리에 비례하여 100 또는 100%의 일부로 표시됩니다.

Angular 파이 차트 예시

문자열 및 숫자 데이터 값으로 데이터 항목을 바인딩하여 IgxPieChartComponent에서 Angular 파이 차트 생성할 수 있습니다. 이러한 데이터 값을 더하면 시각화 값이 100%가 됩니다. 이 경우 예에서는 부서별 예산 지출의 전체 분석을 보여줍니다.

Angular 파이 차트 권장 사항

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

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

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

전설
슬라이스 폭발
슬라이스 선택
차트 애니메이션

파이 차트 모범 사례:

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

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

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

Angular 파이 차트 레전드

범례는 각 포인트에 대한 정보를 표시하고 총 합계에 대한 해당 포인트의 기여도를 파악하는 데 사용됩니다. 범례 클릭을 사용하여 포인트를 축소할 수 있습니다.

원형 차트 옆에 범례를 표시하려면 ItemLegend를 생성하고 IgxLegendComponent 속성에 할당해야 합니다. 그런 다음 legendLabelMemberPath 사용하여 각 원형 조각의 범례 내부에 표시하는 데 사용할 데이터 모델의 속성을 지정할 수 있습니다.

또한 legendItemTemplate 및 legendItemBadgeTemplate 속성과 ItemLegend의 다양한 글꼴 속성을 사용하여 범례 항목의 모양을 추가로 사용자 지정할 수 있습니다.

Angular 파이 차트 Others 카테고리

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

아래 샘플에서 othersCategoryThreshold 2로 설정되고, othersCategoryType Number로 설정됩니다. 따라서 값이 2 이하인 항목은 "기타" 범주에 할당됩니다.

othersCategoryType Percent로 설정하면 othersCategoryThreshold 값이 아닌 백분율로 해석됩니다. 즉, 값이 모든 항목 값 합계의 2% 미만인 항목은 기타 범주에 할당됩니다. 귀하의 애플리케이션에 가장 적합한 othersCategoryType 사용할 수 있습니다.

Angular 파이 차트 폭발

원형 차트는 개별 원형 조각의 폭발은 물론 선택 상태를 수정하고 사용자 정의 논리를 구현할 수 있는 SliceClick 이벤트도 지원합니다.

Angular 파이 차트 선택

원형 차트는 마우스 클릭을 통한 슬라이스 선택을 기본 동작으로 지원합니다. selectedItems 속성을 사용하여 선택한 조각을 확인할 수 있습니다. 그러면 선택한 조각이 강조 표시됩니다.

원형 차트에서 사용할 모드를 설정하는 방법인 selectionMode 라는 속성이 있습니다. 기본값은 Single 입니다. 선택을 비활성화하려면 속성을 Manual로 설정하세요.

원형 차트는 세 가지 선택 모드를 지원합니다.

단일 - 모드가 단일로 설정된 경우 한 번에 하나의 슬라이스만 선택할 수 있습니다. 새 조각을 선택하면 이전에 선택한 조각이 선택 취소되고 새 조각이 선택됩니다.
다중 - 모드가 다중으로 설정되면 한 번에 많은 슬라이스를 선택할 수 있습니다. 슬라이스를 클릭하면 해당 슬라이스가 선택되고, 다른 슬라이스를 클릭하면 이전 슬라이스가 선택된 채로 해당 슬라이스도 선택됩니다.
수동 - 모드가 수동으로 설정되면 선택이 비활성화됩니다.

원형 차트에는 선택과 관련된 4가지 이벤트가 있습니다.

선택한항목변경
선택항목변경됨
선택한항목변경 중
선택한항목변경됨

"Changing"으로 끝나는 이벤트는 취소 가능한 이벤트입니다. 즉, 이벤트 인수 속성 Cancel true로 설정하여 조각 선택을 중지할 수 있습니다. true로 설정하면 관련 속성이 업데이트되지 않고 조각이 선택되지 않습니다. 이는 사용자가 내부 데이터를 기반으로 특정 조각을 선택할 수 없도록 하려는 시나리오에 유용합니다.

Others 슬라이스를 클릭하는 시나리오의 경우 원형 차트는 IgxPieSliceOthersContext 라는 개체를 반환합니다. 이 개체에는 기타 슬라이스에 포함된 데이터 항목 목록이 포함되어 있습니다.

Angular 파이 차트 애니메이션

차트 반경의 크기를 조정하는 radiusFactor 속성을 설정하여 원형 차트에 원활하게 애니메이션을 적용할 수 있습니다. 또한 회전하는 동안 차트 각도가 계속 증가하도록 차트 각도를 지정하도록 startAngle 속성을 설정합니다.

아래 코드에서 radiusFactor는 차트 크기를 0.25%씩 늘리고 startAngle은 차트를 1도 회전시킵니다. radiusFactor 및 startAngle이 최대 제한에 도달하면 애니메이션 플래그를 재설정하고 간격을 지워 애니메이션이 중지됩니다.

Angular 파이 차트 스타일링

원형 차트가 생성되면 아래에 설명된 대로 차트 조각의 색상 변경과 같은 추가 스타일 사용자 정의를 수행할 수 있습니다.

Angular 방사형 파이 차트

방사형 파이 차트 방사형 차트 그룹에 속하며 방사형 차트 그룹에 속하고 차트 중앙에서 데이터 포인트 위치를 향해 확장되는 원형 조각을 사용합니다. 이 차트 유형은 여러 데이터 포인트 계열을 분류하는 개념을 취하고 수평선을 따라 데이터 포인트를 늘리는 대신 원형 축을 중심으로 이를 래핑합니다.

추가 리소스

API 참조

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

차트 종류	컨트롤 이름	API 회원
파이 차트	`IgxPieChartComponent`	`PieChart`
방사형 파이 차트	`IgxDataChartComponent`	`IgxRadialPieSeriesComponent`