Condividi tramite

HorizontalBarChart controllo (anteprima)

  • Articolo

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

Un grafico a barre orizzontale è un grafico che presenta dati categoriali con barre rettangolari con lunghezze proporzionali ai valori che rappresentano. Questo tipo di grafico è utile quando si vogliono mostrare confronti tra varie categorie e le etichette per tali categorie sono lunghe.

Controllo HorizontalBarChart.

Questo componente di codice fornisce un wrapper attorno al controllo Fluent UI HorizontalBarChart 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.
  • HideLabels - Impostare questa opzione su true per nascondere le etichette sul grafico.
  • BarHeight - Questo valore indica l'altezza della barra presentata nel grafico.
  • HideTooltip - Imposta questa opzione su true per nascondere i suggerimenti sul grafico.
  • CustomColors - Impostare questa opzione su true per consentire colori personalizzati nel grafico, se forniti.
  • Variante - Questa opzione consente di visualizzare il grafico in Absolute scale o Part to whole.
  • ChartDataMode - Questa opzione consente di visualizzare il valore di ciascuna barra in Fraction o Percentage.
  • Elementi - Gli elementi azione da rendere:
    • ItemTitle - Il nome visualizzato dei dati specifici del grafico (Item).
    • ItemLegend - La legenda associata ai dati specifici del grafico (Elemento).
    • ItemValue - Imposta il valore dei dati specifici del grafico (Elemento).
    • ItemTotalValue - Valore totale da utilizzare per i dati specifici del grafico (Elemento).
    • ItemXPopover - Il testo del popover sull'asse X per i dati specifici del grafico (Elemento).
    • ItemYPopover - Testo del popover sull'asse Y per i 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.
  • Le etichette nascoste funzionano quando il tipo di grafico è 'Scala assoluta'.
  • Nascondi i suggerimenti funziona correttamente quando l'app è in riproduzione (non in studio), ma potrebbe non essere visualizzato in studio.

Accessibilità

  • AccessibilityLabel - Schermo Lettore aria-label.

Utilizzo

Associare i valori dei dati alle proprietà del grafico corrispondenti nella proprietà del controllo, come illustrato nella seguente formula. Items

Abilita la proprietà CustomColors per definire colori coerenti.

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

Limiti

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