Bagikan melalui

DonutChart kontrol (pratinjau)

  • Artikel

[Artikel ini adalah dokumentasi prarilis dan dapat berubah.]

Bagan donat digunakan untuk menunjukkan proporsi, yang menyatakan nilai parsial dibandingkan dengan nilai total. Jenis bagan ini paling baik untuk menunjukkan persentase masing-masing bagian dibandingkan dengan keseluruhan, di mana perubahan dari waktu ke waktu tidak penting untuk divisualisasikan. Mereka adalah grafik statistik melingkar yang dibagi menjadi beberapa irisan untuk mengilustrasikan proporsi numerik.

Kontrol DonutChart.

Komponen kode ini menyediakan pembungkus di sekitar kontrol Fluent UI DonutChart untuk digunakan di kanvas & halaman kustom.

Penting

  • Ini adalah fitur pratinjau.
  • Fitur pratinjau tidak dibuat untuk penggunaan produksi dan mungkin memiliki fungsionalitas yang dibatasi. Fitur ini tersedia sebelum rilis resmi agar pelanggan bisa memperoleh akses awal dan memberikan tanggapan.

Catatan

Dokumentasi lengkap dan kode sumber ditemukan di repositori komponen kode GitHub.

Properti

Kontrol menerima properti berikut:

  • Title - Nilai ini menunjukkan judul bagan.

  • HideLabel - Opsi ini mengontrol apakah akan menampilkan atau menyembunyikan label pada bagan.

  • HideTooltip - Opsi ini mengontrol apakah akan menampilkan atau menyembunyikan tooltip pada bagan.

  • ShowLabelsInPercentage - Opsi ini mengontrol apakah akan menampilkan label dalam persentase.

  • InnerRadius - Atur nilai untuk jari-jari dalam bagan donat.

  • ValueInsideDonut - Properti ini menunjukkan nilai yang akan ditampilkan di dalam bagan donat.

  • CustomColors - Properti ini digunakan untuk menampilkan warna kustom pada bagan jika disediakan

  • Item - Item tindakan yang akan dirender

    • ItemTitle - Nama tampilan dari data bagan tertentu (Item).
    • ItemKey - Kunci yang digunakan untuk mengidentifikasi Item. Kunci harus unik.
    • ItemValue - Atur nilai data bagan tertentu (Item).
    • ItemColor - Atur nama warna atau nilai HEX yang akan ditampilkan untuk data bagan tertentu (Item).

Catatan

Warna item hanya berlaku jika CustomColors properti diaktifkan.

Aksesibilitas

  • AccessibilityLabel - Pembaca layar aria-label

Penggunaan

Petakan nilai data ke properti bagan yang sesuai dalam Items properti kontrol, seperti yang ditunjukkan dalam rumus di bawah ini. Bagan secara otomatis menyesuaikan visual agar sesuai dengan nilai relatif.

Aktifkan CustomColors properti untuk menentukan warna yang konsisten.

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

Pembatasan

Komponen kanvas ini hanya dapat digunakan pada aplikasi kanvas dan halaman kustom.