Angular 도넛 차트

Ignite UI for Angular 도넛 차트는 변수의 발생을 비례적으로 보여주는 파이 차트와 유사합니다. 도넛형 차트는 동심원 링으로 여러 변수를 표시할 수 있으며 계층적 데이터를 시각화하기 위한 기본 제공 지원을 제공합니다. 링은 다른 데이터 항목에 바인딩될 수 있거나 공통 데이터 소스를 공유할 수 있습니다.

Angular Donut Chart Example

아래 예제와 같이 데이터를 바인딩하여 IgxDoughnutChartComponent 컨트롤을 사용하여 도넛 차트 만들 수 있습니다.

Angular Donut Chart Recommendations

Are Angular Donut Charts right for your project?

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

파이

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

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

Best Practices for Donut Charts

여러 데이터 세트를 사용하여 데이터를 링 디스플레이에 표시합니다.
데이터의 빠른 설명을 위해 도넛의 구멍 안에 값이나 라벨 등의 정보를 배치합니다.
슬라이스 또는 세그먼트를 전체 값 또는 전체에 비례하는 백분율 값으로 비교합니다.
카테고리 그룹이 더 작은 세그먼트로 분할되는 방식을 보여줍니다.
데이터 세그먼트의 합이 100%가 되도록 보장합니다.
부품의 세그먼트/슬라이스에 대해 색상 팔레트를 구별할 수 있는지 확인합니다.

When not to use a Donut Chart

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

Angular Donut Chart - Slice Selection

Angular 도넛 차트 클릭 시 슬라이스를 선택할 수 있습니다. 선택적으로, 선택한 슬라이스에 단일 사용자 지정 시각적 스타일을 적용할 수 있습니다. 사용자가 슬라이스를 클릭하면 SliceClick 이벤트가 발생합니다. 슬라이스 선택을 활성화하면 클릭 시 슬라이스의 선택을 수정할 수 있습니다. 다음 샘플은 슬라이스 선택을 활성화하고 선택한 슬라이스 색상을 회색으로 설정하는 방법을 보여줍니다.

Angular Donut Chart - Multiple Rings

Angular 도넛 차트에서 여러 개의 링 디스플레이를 가질 수 있으며, 각 링은 다른 데이터 항목에 바인딩될 수 있거나 공통 데이터 소스를 공유할 수 있습니다. 이는 아래의 계절별 월별 데이터 디스플레이와 같이 기본 공통 범주가 있는 계층으로 데이터를 표시해야 하는 경우에 유용할 수 있습니다.

Additional Resources

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

API References

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