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

The Angular Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The SliceClick event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray.

Angular Donut Chart - Multiple Rings

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

Additional Resources

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

API References

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