Condividi tramite

HorizontalBarChart - Stacked controllo (anteprima)

  • Articolo

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

Grafico a barre in pila orizzontale visualizza più serie di dati come barre in pila, dove ciascuna barra rappresenta una categoria. Le barre sono impilate una accanto all'altra, con la lunghezza di ciascuna barra che rappresenta il valore della categoria della serie.

Comando HorizontalBarChart - Stacked.

Questo componente di codice fornisce un wrapper intorno al controllo HorizontalBarChart - Stacked dell'interfaccia utente Fluent per l'uso nelle app canvas e nelle pagine 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, vedi repository dei componenti del codice GitHub.

Proprietà

Il comando accetta le seguenti proprietà:

  • HideLegend - Questo valore indica se mostrare o nascondere le legende sul grafico.

  • BarHeight - Questo valore indica l'altezza della barra presentata nel grafico.

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

  • CustomColors - Questa opzione 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).
    • ItemCallout - Imposta il valore da visualizzare in un popover/tooltip.

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(
    {
        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"
    }
)

Limiti

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