다음을 통해 공유

HorizontalBarChart 제어 (프리뷰)

  • 아티클

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

수평 막대형 차트는 값에 비례하는 길이의 직사각형 막대로 범주형 데이터를 표현하는 차트입니다. 이러한 유형의 차트는 다양한 범주 간의 비교를 보여주고 해당 범주의 라벨이 길 때 유용합니다.

HorizontalBarChart 컨트롤.

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

중요

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

참고

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

속성

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

  • 제목 - 이 값은 차트의 제목을 나타냅니다.
  • HideLabels - 차트에서 라벨을 숨기려면 이 옵션을 true로 설정합니다.
  • 막대 높이 - 이 값은 차트에 표시된 막대의 높이를 나타냅니다.
  • HideTooltip - 차트에서 도구 설명을 숨기려면 이 옵션을 true로 설정합니다.
  • CustomColors - 차트에 사용자 정의 색상이 제공되는 경우 이 옵션을 true로 설정합니다.
  • 변형 - 이 옵션을 사용하면 차트를 Absolute scale 또는 Part to whole형태로 표시할 수 있습니다.
  • ChartDataMode - 이 옵션은 각 막대의 값을 Fraction 또는 Percentage로 표시합니다.
  • 항목 - 렌더링할 작업 항목:
    • ItemTitle - 특정 차트 데이터(항목)의 표시 이름입니다.
    • ItemLegend - 특정 차트 데이터(항목)와 관련된 범례입니다.
    • ItemValue - 특정 차트 데이터(항목)의 값을 설정합니다.
    • ItemTotalValue - 특정 차트 데이터(항목)에 사용될 총 값입니다.
    • ItemXPopover - 특정 차트 데이터(항목)에 대한 X축 팝오버 텍스트입니다.
    • ItemYPopover - 특정 차트 데이터(항목)에 대한 Y축 팝오버 텍스트입니다.
    • ItemColor - 특정 차트 데이터(항목)에 대해 표시할 색상 이름이나 HEX 값을 설정합니다.

참고

  • 항목 색상은 CustomColors 속성이 켜져 있는 경우에만 적용됩니다.
  • 차트 유형이 '절대 척도'인 경우에만 라벨 숨기기가 작동합니다.
  • 앱을 재생할 때는 툴팁 숨기기가 제대로 작동하지만(스튜디오에서는 작동하지 않음), 스튜디오에서는 렌더링이 작동하지 않을 수 있습니다.

접근성

  • AccessibilityLabel - 화면 독자 aria-label.

사용

다음 수식에서 보여준 것처럼, 컨트롤의 속성에서 해당 차트 속성에 대한 매핑 데이터 값을 Items 지정합니다.

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

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

제한 사항

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