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

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

  • Статья

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

Кольцевые диаграммы используются для отображения пропорции, которая выражает частичное значение по сравнению с общим значением. Такие типы диаграмм лучше всего подходят для отображения процентного соотношения отдельных частей по сравнению с целым, когда не так важно визуализировать изменения с течением времени. Это круговые статистические графики, разделенные на срезы для иллюстрации числовых пропорций.

Элемент управления DonutChart.

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

Внимание!

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

Заметка

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

Свойства

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

  • Название - Это значение обозначает название диаграммы.

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

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

  • ShowLabelsInPercentage - Этот параметр управляет отображением меток в процентах.

  • InnerRadius - Установите значение внутреннего радиуса кольцевой диаграммы.

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

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

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

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

Заметка

Цвет элемента применяется только в том случае, если свойство CustomColors включено.

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

  • AccessibilityLabel - Экран Читатель aria-label

Использование

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

Включите свойство CustomColors, чтобы определить согласованные цвета.

Table(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

Ограничения

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