DonutChart controllo (anteprima)

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

I grafici a ciambella vengono utilizzati per mostrare la proporzione, che esprime un valore parziale in confronto a un valore totale. Questi tipi di grafici sono ideali per mostrare la percentuale di singole parti rispetto a un insieme, quando non è importante visualizzare la variazione nel tempo. Si tratta di grafici statistici circolari divisi in sezioni per illustrare la proporzione numerica.

Controllo DonutChart.

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

Importante

  • Si tratta di una funzionalità di anteprima.
  • Le funzionalità di anteprima non sono destinate all'uso in produzione e potrebbero avere funzionalità limitate. Queste funzioni sono disponibili prima di una versione ufficiale, in modo che i clienti possano ottenere l'accesso anticipato e fornire commenti e suggerimenti.

Annotazioni

La documentazione completa e il codice sorgente sono disponibili nel repository dei componenti del codice GitHub .

Properties

Il comando accetta le seguenti proprietà:

  • Titolo - Questo valore indica il titolo del grafico.

  • HideLabel - Questa opzione controlla se mostrare o nascondere le etichette sul grafico.

  • HideTooltip - Questa opzione controlla se mostrare o nascondere i suggerimenti sul grafico.

  • ShowLabelsInPercentage - Questa opzione controlla se visualizzare le etichette in percentuale.

  • InnerRadius - Imposta il valore del raggio interno del grafico a ciambella.

  • ValueInsideDonut - Questa proprietà indica il valore da visualizzare all'interno del grafico a ciambella.

  • CustomColors - Questa proprietà viene utilizzata per mostrare colori personalizzati sul grafico, se forniti

  • Elementi - Gli elementi di azione da eseguire

    • ItemTitle - Nome visualizzato dei dati specifici del grafico (elemento).
    • ItemKey - La chiave da utilizzare per identificare l'oggetto. I tasti devono essere univoci.
    • ItemValue - Imposta il valore dei dati specifici del grafico (Item).
    • ItemColor - Imposta il nome del colore o il valore HEX da visualizzare per i dati specifici del grafico (elemento).

Annotazioni

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

Accessibility

  • AccessibilityLabel - Etichetta aria per lettore di schermo

Usage

Mappare i valori dei dati alle proprietà del grafico corrispondenti nella proprietà Items del controllo, come dimostrato nella formula seguente. Il grafico regola automaticamente la visualizzazione per corrispondere ai valori relativi.

Abilita la proprietà CustomColors per definire colori coerenti.

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

Limitations

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

  • Last updated on