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

HorizontalBarChart - Stacked control (підготовча версія)

  • Стаття

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

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

HorizontalBarChart - Складений контроль.

Цей компонент коду надає обгортку навколо Fluent UI HorizontalBarChart - Stacked control для використання на полотні та користувацьких сторінках.

Важливо

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

Нотатка

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

Властивості

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

  • HideLegend - Це значення вказує, показувати або приховувати легенди на діаграмі.

  • BarHeight - Це значення позначає висоту стовпчика, представлену на діаграмі.

  • HideTooltip - Ця опція визначає, показувати чи приховувати спливаючі підказки на діаграмі.

  • CustomColors - Ця опція використовується для відображення користувацьких кольорів на діаграмі, якщо вона передбачена

  • Items - Елементи дії для рендерингу

    • ItemTitle - Відображуване ім’я конкретних даних діаграми (елемент).
    • ItemKey - Ключ, який використовується для ідентифікації Предмета. Ключі мають бути унікальними.
    • ItemValue - Встановлює значення конкретних даних діаграми (Item).
    • ItemColor - Встановіть ім’я кольору або значення HEX, яке буде відображатися для конкретних даних діаграми (Item).
    • ItemCallout - Встановіть значення, яке буде відображатися у спливаючому вікні/підказці.

Нотатка

Колір елемента застосовується лише в тому випадку, якщо властивість CustomColors увімкнена.

Спеціальні можливості

  • AccessibilityLabel - Програма для читання з екрану aria-label

Використання

Зіставте значення даних з відповідними властивостями діаграми у 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"
    }
)

Обмеження

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