HorizontalBarChart - Stacked 제어 (프리뷰)

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

수평 누적 가로 막대형 차트는 여러 데이터 계열을 누적 막대로 표시하며 각 막대는 범주를 나타냅니다. 막대는 서로 나란히 쌓여 있으며 각 막대의 길이는 계열 범주의 값을 나타냅니다.

이 코드 구성 요소는 캔버스 및 사용자 정의 페이지에서 사용할 수 있도록 Fluent UI HorizonBarChart - Stacked 컨트롤 주위에 래퍼를 제공합니다.

중요

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

참고

전체 문서와 소스 코드는 GitHub 코드 구성 요소 리포지토리를 참조하세요.

속성

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

• HideLegend - 이 값은 차트에 범례를 표시할지 아니면 숨길지 여부를 나타냅니다.

• 막대 높이 - 이 값은 차트에 표시된 막대의 높이를 나타냅니다.

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

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

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

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

참고

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

접근성

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

사용

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

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

Table(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

제한 사항

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