GaugeChart controllo (anteprima)

Articolo
10/16/2024

[Questo articolo fa parte della documentazione non definitiva, pertanto è soggetto a modifiche.]

Esistono due tipi di tabelle di misurazione: tachimetro e misuratore di potenza.

Controllo GaugeChart.

Il tachimetro misura un valore numerico in rapporto a un intero, come la capacità di memoria. L'ago è un componente facoltativo. Il colore dell'segmento che rappresenta il valore misurato può essere personalizzato per adattarsi a determinati scenari o per allineare con colori di branding.

Il misuratore di valutazione mostra lo stato del valore corrente entro alcuni intervalli o segmenti predefiniti. In questo caso l'ago è un componente obbligatorio.

Questo componente di codice fornisce un wrapper attorno al controllo Fluent UI GaugeChart da utilizzare in pagine canvas e personalizzate. ...

Importante

Questa è una funzionalità di anteprima.
Le funzionalità di anteprima non sono destinate ad essere utilizzate per la produzione e sono soggette a restrizioni. Queste funzionalità sono disponibili prima di una versione ufficiale di modo che i clienti possano ottenere un accesso prioritario e fornire dei commenti.

Nota

Per la documentazione completa e il codice sorgente, vedere il repository dei componenti del codice GitHub. |

Proprietà

Il comando accetta le seguenti proprietà:

Titolo - Questo valore indica il titolo del grafico.
Sottoetichetta - Questo valore indica la sottoetichetta del grafico.
ChartValue - Questo valore indica il valore da visualizzare sull'indicatore.
MinValue - Questo valore indica il valore minimo dell'indicatore.
MaxValue - Questo valore indica il valore massimo dell'indicatore.
HideMinMax - Questo valore indica se nascondere i valori minimo e massimo sull'indicatore.
HideLegend - Questo valore indica se nascondere la legenda sull'indicatore.
ChartValueFormat - Questo valore indica di visualizzare il valore del grafico in Percentage o Fraction.
CustomColors - Impostare questo valore su true per consentire colori personalizzati nel grafico, se forniti.
Elementi - Gli elementi azione da rendere:
- ItemLegend - Il nome visualizzato dei dati specifici del grafico (Item).
- ItemSize - La dimensione dei dati specifici del grafico (Elemento).
- ItemColor - Imposta il nome del colore o il valore HEX da visualizzare per i dati specifici del grafico (Elemento).

Nota

Il colore dell'articolo si applica solo se la proprietà CustomColors è attivata.

Accessibilità

AccessibilityLabel - Schermo Lettore aria-label.

Utilizzo

Tachimetro

Per Items è necessaria solo una riga. Utilizzare ChartValue per indicare la posizione di destinazione.

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

Misuratore di valutazione

Fornire gli intervalli come proprietà Items . La somma di tutti i ItemSize valori deve essere pari al 100% della differenza tra MinValue e MaxValue. Utilizzare ChartValue per indicare la posizione corrente.

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

Limiti

Questo componente canvas può essere usato solo nelle app canvas e nelle pagine personalizzate.

Condividi tramite