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

Стаття
12/11/2024

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

Існує два типи вимірювальних таблиць: спідометр і вимірювач рейтингу.

Керування GaugeChart.

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

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

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

Важливо

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

Нотатка

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

Властивості

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

Title - Це значення позначає назву діаграми.
Sublabel - це значення позначає підмітку діаграми.
ChartValue - Це значення позначає значення, яке буде відображатися на датчику.
MinValue - Це значення позначає мінімальне значення датчика.
MaxValue - Це значення позначає максимальне значення датчика.
HideMinMax - Це значення вказує, чи потрібно приховувати мінімальні та максимальні значення на датчику.
HideLegend - Це значення вказує, чи слід приховувати легенду на датчику.
ChartValueFormat - це значення позначає відображення значення діаграми в Percentage або Fraction.
CustomColors - встановіть це значення true, щоб дозволити власні кольори на діаграмі, якщо вони є.
Items - Елементи дії для відображення:
- ItemLegend - Відображуване ім’я конкретних даних діаграми (Item).
- ItemSize - Розмір конкретних даних діаграми (Item).
- ItemColor - Встановіть ім’я кольору або значення HEX, яке буде відображатися для конкретних даних діаграми (Item).

Нотатка

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

Обмеження

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

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