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 멤버가 나열되어 있습니다.