Bagikan melalui

HorizontalBarChart - Stacked kontrol (pratinjau)

  • Artikel

[Artikel ini adalah dokumentasi prarilis dan dapat berubah.]

Diagram batang bertumpuk horizontal menampilkan beberapa rangkaian data sebagai batang bertumpuk, dengan setiap batang mewakili kategori. Batang ditumpuk berdampingan satu sama lain, dengan panjang setiap batang mewakili nilai kategori seri.

HorizontalBarChart - Kontrol bertumpuk.

Komponen kode ini menyediakan pembungkus di sekitar Fluent UI HorizontalBarChart - Kontrol bertumpuk 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

Untuk dokumentasi lengkap dan kode sumber, lihat repositori komponen kode GitHub.

Properti

Kontrol menerima properti berikut:

  • HideLegend - Nilai ini menunjukkan apakah akan menampilkan atau menyembunyikan legenda pada bagan.

  • BarHeight - Nilai ini menunjukkan tinggi batang yang disajikan dalam grafik.

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

  • CustomColors - Opsi ini digunakan untuk menampilkan warna khusus 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).
    • ItemCallout - Atur nilai yang akan ditampilkan pada popover/tooltip.

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(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

Pembatasan

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