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

HorizontalBarChart - Stacked контроль (предварительная версия)

  • Статья

[Данная статья посвящена предварительному выпуску и может быть изменена.]

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

Элемент управления HorizontalBarChart - Stacked

Этот компонент кода обеспечивает программу-оболочка вокруг элемента управления Fluent UI HorizontalBarChart - Stacked для использования в приложениях на основе холста и на пользовательских страницах.

Важно

  • Это предварительная версия функции.
  • Предварительные версии функций не предназначены для использования в производственной среде, а их функциональность может быть ограничена. Они доступны перед официальным выпуском, чтобы клиенты могли досрочно получить доступ и предоставить отзывы.

Заметка

Полную документацию и исходный код см. в Репозитории компонентов кода GitHub.

Свойства

Элемент управления принимает следующие свойства:

  • HideLegend - Это значение определяет, показывать или скрывать легенды на диаграмме.

  • BarHeight - Это значение обозначает высоту столбца, представленного на диаграмме.

  • HideTooltip - Этот параметр управляет отображением или скрытием всплывающих подсказок на диаграмме.

  • CustomColors - эта опция используется для отображения пользовательских цветов на диаграмме, если они указаны.

  • Элементы - Элементы действий для визуализации.

    • ItemTitle - отображаемое имя конкретных данных диаграммы (Item).
    • ItemKey - Ключ, используемый для идентификации элемента. Клавиши должны быть уникальными.
    • ItemValue - Устанавливает значение конкретных данных диаграммы (Item).
    • ItemColor - Задайте название цвета или шестнадцатеричное значение, которое будет отображаться для определенных данных диаграммы (элемента).
    • 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"
    }
)

Ограничения

Этот компонент холста можно использовать только в приложениях на основе холста и настраиваемых страницах.