GaugeChart kontrol (pratinjau)

Artikel
10/16/2024

[Artikel ini adalah dokumentasi prarilis dan dapat berubah.]

Ada dua jenis bagan pengukur: Speedometer dan pengukur peringkat.

Kontrol GaugeChart.

Speedometer mengukur nilai numerik terhadap keseluruhan, seperti kapasitas penyimpanan. Jarum adalah komponen opsional. Warna segmen yang mewakili nilai yang diukur dapat disesuaikan agar sesuai dengan skenario tertentu atau selaras dengan warna branding.

Pengukur peringkat menunjukkan status nilai saat ini dalam beberapa rentang atau segmen yang telah ditentukan sebelumnya. Jarum adalah komponen yang diperlukan di sini.

Komponen kode ini menyediakan pembungkus di sekitar kontrol Fluent UI GaugeChart 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:

Title - Nilai ini menunjukkan judul bagan.
Sublabel - Nilai ini menunjukkan sub label bagan.
ChartValue - Nilai ini menunjukkan nilai yang akan ditampilkan pada pengukur.
MinValue - Nilai ini menunjukkan nilai minimum pengukur.
MaxValue - Nilai ini menunjukkan nilai maksimum pengukur.
HideMinMax - Nilai ini menunjukkan apakah akan menyembunyikan nilai min dan maks pada pengukur.
HideLegend - Nilai ini menunjukkan apakah akan menyembunyikan legenda pada pengukur.
ChartValueFormat - Nilai ini menunjukkan untuk menunjukkan nilai bagan di Percentage atau Fraction.
CustomColors - Atur nilai ini ke true untuk mengizinkan warna kustom pada bagan jika disediakan.
Items - Item tindakan yang akan dirender:
- ItemLegend - nama tampilan data bagan tertentu (Item).
- ItemSize - Ukuran data grafik 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

Speedometer

Hanya satu baris yang dibutuhkan untuk Items. Gunakan untuk ChartValue menunjukkan posisi target.

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

Pengukur peringkat

Berikan rentang sebagai Items properti. Jumlah semua ItemSize nilai harus menjumlahkan hingga 100% dari selisih antara MinValue dan MaxValue. Gunakan untuk ChartValue menunjukkan posisi saat ini.

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

Pembatasan

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

Bagikan melalui