Поділитися через

HorizontalBarChart контроль (підготовча версія)

  • Стаття

[Ця стаття стосується попередньої версії, і її буде змінено.]

Горизонтальна стовпчаста діаграма — це діаграма, яка представляє категоричні дані за допомогою прямокутних стовпчиків, довжина яких пропорційна значенням, які вони представляють. Цей тип діаграми корисний, коли потрібно показати порівняння між різними категоріями, а мітки для цих категорій довгі.

Елемент керування HorizontalBarChart.

Цей компонент коду забезпечує обгортку навколо елемента керування Fluent UI HorizontalBarChart для використання в canvas & користувацькі сторінки.

Важливо

  • Це функція попереднього перегляду.
  • Підготовчі функції призначені для невиробничого використання і можуть бути обмежені. Ці функції доступні до офіційного випуску, щоб клієнти могли ознайомитися з ними заздалегідь і залишити відгуки.

Нотатка

Повну документацію та вихідний код можна знайти в репозиторії компонентів коду GitHub.

Властивості

Елемент управління приймає такі властивості:

  • Title - Це значення позначає назву діаграми.
  • HideLabels - установіть для цього параметра значення true, щоб приховати мітки на діаграмі.
  • BarHeight - Це значення позначає висоту стовпчика, представлену на діаграмі.
  • HideTooltip - встановіть для цього параметра значення true, щоб приховати підказки на діаграмі.
  • CustomColors . Установіть для цього параметра значення true, щоб дозволити спеціальні кольори на діаграмі, якщо вони є.
  • Варіант . Цей параметр дозволяє відображати діаграму в Absolute scale або Part to whole.
  • ChartDataMode - цей параметр дозволяє відображати значення кожного стовпчика в Fraction або Percentage.
  • Елементи - Елементи дії для відтворення:
    • ItemTitle - Відображуване ім’я конкретних даних діаграми (Елемент).
    • ItemLegend – легенда, пов’язана з конкретними даними діаграми (Елемент).
    • ItemValue - Установіть значення певних даних діаграми (Елемент).
    • ItemTotalValue - загальне значення, яке буде використовуватися для конкретних даних діаграми (Елемент).
    • ItemXPopover - спливаючий текст на осі Х для конкретних даних діаграми (Елемент).
    • ItemYPopover - спливаючий текст осі Y для конкретних даних діаграми (Елемент).
    • ItemColor - Встановіть ім’я кольору або значення HEX, яке буде відображатися для конкретних даних діаграми (Item).

Нотатка

  • Колір елемента застосовується лише в тому випадку, якщо властивість 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"
    }
)

Обмеження

Цей компонент полотна можна використовувати лише в компонованих програмах і настроюваних сторінках.