Angular 파이 차트

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

Angular Pie Chart Example

데이터 항목에 문자열과 숫자 데이터 값을 할당하여 Angular 파이 차트IgxPieChartComponent을 만들 수 있습니다. 이 데이터 값들은 시각화의 100% 값이 됩니다. 이 예시는 부서별 예산 지출 전체 분포를 보여줍니다.

Angular Pie Chart Recommendations

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

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

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

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

파이 차트 모범 사례:

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

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

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

Angular Pie Chart Legend

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

파이 차트 옆에 범례를 표시하려면 ItemLegend를 생성하고 속성에IgxLegendComponent 할당해야 합니다.legendLabelMemberPath 그 후 각 파이 슬라이스에 대해 데이터 모델에서 어떤 속성을 사용해 범례 안에 표시할지 지정할 수 있습니다.

또한 ItemLegend의 andlegendItemTemplate 속성과 다양한 글꼴 속성을 사용legendItemBadgeTemplate 해 전설 아이템의 외관을 더욱 맞춤화할 수 있습니다.

Angular Pie Chart Others Category

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

아래 샘플에서 는othersCategoryThreshold 2로 설정되어 있고,othersCategoryType는 숫자로 설정되어 있습니다. 따라서 가치 2 이하의 아이템은 "기타" 범주에 할당됩니다.

PercentothersCategoryType로 설정othersCategoryThreshold 하면 값이 아닌 백분율로 해석되며, 즉 모든 항목 값의 합의 2% 미만인 항목은 Others 카테고리에 할당됩니다. 본인의 용도에 가장 적합한 것을othersCategoryType 사용하세요.

Angular Pie Chart Explosion

파이 차트는 개별 파이 슬라이스의 폭발 기능과SliceClick 선택 상태를 수정하고 사용자 지정 로직을 구현할 수 있는 이벤트를 지원합니다

Angular Pie Chart Selection

파이 차트는 마우스 클릭으로 슬라이스 선택을 기본 동작으로 지원합니다. 선택한 슬라이스는 다음selectedItems 속성을 사용하여 결정할 수 있습니다. 선택한 슬라이스는 하이라이트됩니다.

파이 차트에 사용할 모드를 설정하는 속성selectionMode이 있습니다. 기본 값은 다음과 같습니다Single. 선택을 비활성화하려면 속성을 다음으로Manual 설정하세요.

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

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

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

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

"Changing"으로 끝나는 이벤트는 취소 가능한 이벤트로, 이벤트 인자 속성을Cancel true로 설정하면 슬라이스 선택을 멈출 수 있습니다. true로 설정하면 관련 속성이 업데이트되지 않고, 슬라이스가 선택되지 않습니다. 이 기능은 사용자가 내부 데이터를 기반으로 특정 슬라이스를 선택할 수 없게 하려는 상황에서 유용합니다.

Others 슬라이스를 클릭하는 상황에서는, 파이 차트에서 호출IgxPieSliceOthersContext 된 객체가 반환됩니다. 이 객체는 Others 슬라이스 내에 포함된 데이터 항목 목록을 포함합니다.

Angular Pie Chart Animation

속성을 설정radiusFactor 하면 원형 차트의 반경을 부드럽게 조정할 수 있습니다. 또한 차트가 회전할 때 각도를 계속 증가하도록 속성을 설정startAngle 하세요.

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

Angular Pie Chart Styling

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

Angular Radial Pie Chart

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

Additional Resources

API References

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

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