다음을 통해 공유

GaugeChart 제어 (맞추다)

  • 아티클

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

게이지 차트에는 속도계와 등급계라는 두 가지 유형이 있습니다.

GaugeChart 컨트롤.

속도계는 저장 용량처럼 전체에 대한 숫자 값을 측정합니다. 바늘은 선택사항입니다. 측정되는 값을 나타내는 세그먼트의 색상은 특정 시나리오에 맞게 사용자 정의하거나 브랜딩 색상과 함께 사용할 수 있습니다.

평가 미터는 몇 가지 미리 정의된 범위나 세그먼트 내에서 현재 값의 상태를 보여줍니다. 여기서 바늘은 필수 구성 요소입니다.

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

중요

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

참고

전체 문서와 소스 코드는 GitHub 코드 구성 요소 저장소에서 확인하세요. |

속성

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

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

  • 하위 레이블 - 이 값은 차트의 하위 레이블을 나타냅니다.

  • ChartValue - 이 값은 게이지에 표시될 값을 나타냅니다.

  • MinValue - 이 값은 게이지의 최소값을 나타냅니다.

  • MaxValue - 이 값은 게이지의 최대값을 나타냅니다.

  • HideMinMax - 이 값은 게이지의 최소값과 최대값을 숨길지 여부를 나타냅니다.

  • HideLegend - 이 값은 게이지의 범례를 숨길지 여부를 나타냅니다.

  • ChartValueFormat - 이 값은 차트 값을 Percentage 또는 Fraction에 표시함을 나타냅니다.

  • CustomColors - 차트에 사용자 정의 색상이 제공되는 경우 이 값을 true로 설정하면 됩니다.

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

    • ItemLegend - 특정 차트 데이터(항목)의 표시 이름입니다.
    • ItemSize - 특정 차트 데이터(항목)의 크기입니다.
    • ItemColor - 특정 차트 데이터(항목)에 대해 표시할 색상 이름이나 HEX 값을 설정합니다.

참고

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

접근성

  • AccessibilityLabel - 화면 독자 aria-label.

사용

속도계

Items에는 한 행만 필요합니다. ChartValue 를 사용하여 대상 위치를 나타냅니다.

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

평가 미터

범위를 Items 속성으로 제공합니다. 모든 ItemSize 값의 합은 MinValue 와 MaxValue의 차이의 100%가 되어야 합니다. ChartValue 를 사용하여 현재 위치를 나타냅니다.

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

제한 사항

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