다음을 통해 공유

DonutChart 제어 (프리뷰)

  • 아티클

[이 문서는 시험판 문서이며 변경될 수 있습니다.]

도넛형 차트는 비율을 표시하는 데 사용되며, 비율은 전체 값에 비해 일부 값을 표현하는 것입니다. 이러한 유형의 차트는 시간 경과에 따른 변화를 시각화하는 것이 중요하지 않은 경우 전체에 대한 개별 부분의 백분율을 표시하는 데 가장 적합합니다. 이는 숫자적 비율을 설명하기 위해 슬라이스로 나누어진 원형 통계 그래픽입니다.

DonutChart 컨트롤.

이 코드 구성 요소는 캔버스 및 사용자 정의 페이지에서 사용할 수 있는 Fluent UI DonutChart 컨트롤을 감싸는 래퍼를 제공합니다.

중요

  • 이는 프리뷰 기능입니다.
  • 프리뷰 기능은 생산용으로 만들어진 것이 아니므로 기능이 제한될 수 있습니다. 이런 기능은 공식 릴리스 전에 사용할 수 있으므로 고객이 조기에 액세스하고 피드백을 제공할 수 있습니다.

참고

전체 문서와 소스 코드는 GitHub 코드 구성 요소 저장소에서 찾을 수 있습니다.

속성

이 컨트롤에는 다음과 같은 속성을 사용할 수 있습니다.

  • 제목 - 이 값은 차트의 제목을 나타냅니다.

  • HideLabel - 이 옵션은 차트에 라벨을 표시하거나 숨길지 여부를 제어합니다.

  • 도구 설명 숨기기 - 이 옵션은 차트에 도구 설명을 표시할지 여부를 제어합니다.

  • ShowLabelsInPercentage - 이 옵션은 라벨을 백분율로 표시할지 여부를 제어합니다.

  • InnerRadius - 도넛 차트의 내부 반경 값을 설정합니다.

  • ValueInsideDonut - 이 속성은 도넛 차트 내부에 표시될 값을 나타냅니다.

  • CustomColors - 이 속성은 제공된 경우 차트에 사용자 정의 색상을 표시하는 데 사용됩니다.

  • 항목 - 렌더링할 작업 항목

    • ItemTitle - 특정 차트 데이터(항목)의 표시 이름입니다.
    • ItemKey - 항목을 식별하는 데 사용하는 키입니다. 키는 고유해야 합니다.
    • ItemValue - 특정 차트 데이터(항목)의 값을 설정합니다.
    • ItemColor - 특정 차트 데이터(항목)에 대해 표시할 색상 이름이나 HEX 값을 설정합니다.

참고

항목 색상은 CustomColors 속성이 켜져 있는 경우에만 적용됩니다.

접근성

  • 접근성 레이블 - 화면 독자 aria-레이블

사용

아래 수식에 설명된 대로 컨트롤의 Items 속성에 있는 해당 차트 속성에 데이터 값을 매핑합니다. 차트는 상대 값과 일치하도록 시각적 개체를 자동으로 조정합니다.

일관된 색상을 정의하려면 CustomColors 속성을 활성화하세요.

Table(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

제한 사항

이 캔버스 구성 요소는 캔버스 앱 및 사용자 정의 페이지에서만 사용할 수 있습니다.