Condividi tramite

DonutChart controllo (anteprima)

  • Articolo

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

I grafici a ciambella vengono utilizzati per mostrare le proporzioni, ovvero esprimono 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 la variazione nel tempo non è importante da visualizzare. Si tratta di grafici statistici circolari divisi in sezioni per illustrare le proporzioni numeriche.

Controllo DonutChart.

Questo componente di codice fornisce un wrapper attorno al controllo Fluent UI DonutChart 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

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

Proprietà

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 mostrare le etichette in percentuale.

  • InnerRadius - Imposta il valore per il 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 rendere

    • ItemTitle - Il nome visualizzato dei dati specifici del grafico (Item).
    • 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).

Nota

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

Accessibilità

  • AccessibilityLabel - Schermo Lettore aria-label

Utilizzo

Mappare i valori dei dati alle proprietà del grafico corrispondenti nella proprietà Items del controllo, come dimostrato nella formula seguente. Il grafico regola automaticamente l'oggetto visivo in modo che corrisponda 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"
    }
)

Limiti

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