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

Статья
10/16/2024

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

Существует два типа измерительных диаграмм: спидометр и тахометр.

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

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

Счетчик рейтинга показывает состояние текущего значения в пределах нескольких предопределенных диапазонов или сегментов. Игла здесь является обязательным компонентом.

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

Внимание!

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

Заметка

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

Свойства

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

Название - Это значение обозначает название диаграммы.
Подпись - Это значение обозначает подпись диаграммы.
ChartValue - Это значение обозначает значение, которое будет отображаться на шкале.
MinValue - Это значение обозначает минимальное значение датчика.
MaxValue - Это значение обозначает максимальное значение датчика.
HideMinMax - Это значение указывает, следует ли скрывать минимальные и максимальные значения на шкале.
HideLegend - Это значение указывает, следует ли скрывать легенду на шкале.
ChartValueFormat - Это значение указывает на отображение значения диаграммы в Percentage или Fraction.
CustomColors - Установите это значение на true, чтобы разрешить использование пользовательских цветов на диаграмме, если они предусмотрены.
Элементы - Элементы действий для визуализации:
- ItemLegend - отображаемое имя конкретных данных диаграммы (Item).
- ItemSize - Размер конкретных данных диаграммы (элемент).
- ItemColor - Задайте имя цвета или шестнадцатеричное значение, которое будет отображаться для определенных данных диаграммы (элемента).

Заметка

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

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

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

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

Спидометр

Для Items нужна только одна строка. Используйте ChartValue для указания целевой позиции.

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

Рейтинговый метр

Укажите диапазоны как свойство Items . Сумма всех ItemSize значений должна составлять 100% разницы между MinValue и MaxValue. Используйте ChartValue для указания текущего положения.

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

Ограничения

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

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