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

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

  • Стаття

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

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

Керування DonutChart.

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

Важливо

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

Нотатка

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

Властивості

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

  • Title - Це значення позначає назву діаграми.

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

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

  • ShowLabelsInPercentage - Цей параметр визначає, чи показувати мітки у відсотках.

  • InnerRadius - Встановіть значення для внутрішнього радіуса діаграми пончиків.

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

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

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

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

Нотатка

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

Обмеження

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