DonutChart Kontroll (forhåndsversjon)

[Denne artikkelen inneholder dokumentasjon for forhåndsversjonen og kan bli endret.]

Smultringdiagrammer brukes til å vise proporsjoner, som uttrykker en delverdi sammenlignet med en totalverdi. Denne typen diagrammer er best for å vise prosentandelen av individuelle deler sammenlignet med en helhet, der endringen over tid ikke er viktig å visualisere. De er sirkulær statistisk grafikk delt inn i skiver for å illustrere numeriske proporsjoner.

Denne kodekomponenten gir en innpakning rundt Fluent UI DonutChart-kontrollen for bruk på lerret og egendefinerte sider.

Viktig!

• Dette er forhåndsversjonsfunksjon.
• Forhåndsversjonsfunksjonene er ikke ment for produksjonsbruk og kan ha begrenset funksjonalitet. Disse funksjonene er tilgjengelige før en offisiell utgivelse, slik at kunder kan få tidlig tilgang og gi tilbakemeldinger.

Merk

Full dokumentasjon og kildekode finnes i GitHub-kodekomponentrepositoriet.

Egenskaper

Kontrollen godtar følgende egenskaper:

• Tittel - Denne verdien angir tittelen på diagrammet.

• HideLabel – Dette alternativet styrer om etiketter skal vises eller skjules i diagrammet.

• SkjulVerktøytips – Dette alternativet styrer om verktøytips skal vises eller skjules i diagrammet.

• ShowLabelsInPercentage - Dette alternativet kontrollerer om etiketter skal vises i prosent.

• InnerRadius - Angi verdien for den indre radiusen til smultringdiagrammet.

• ValueInsideDonut - Denne egenskapen angir verdien som skal vises i smultringdiagrammet.

• CustomColors – Denne egenskapen brukes til å vise egendefinerte farger i diagrammet hvis den er angitt

• Elementer – Handlingselementene som skal gjengis

  • ItemTitle - Visningsnavnet til de bestemte diagramdataene (Item).
  • ItemKey - Nøkkelen som skal brukes til å identifisere elementet. Nøklene må være unikt.
  • ItemValue - Angi verdien for de bestemte diagramdataene (Item).
  • ItemColor - Angi fargenavnet eller HEX-verdien som skal vises for de bestemte diagramdataene (Item).

Merk

Elementfarge gjelder bare hvis CustomColors-egenskapen er aktivert.

Tilgjengelighet

• AccessibilityLabel - Skjerm leser aria-etikett

Bruk

Tilordne dataverdier til de tilsvarende diagramegenskapene i Items-egenskapen for kontrollen, som vist i formelen nedenfor. Diagrammet justerer automatisk visualobjektet slik at det samsvarer med de relative verdiene.

Aktiver CustomColors-egenskapen for å definere konsekvente farger.

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

Begrensninger

Denne lerretskomponenten kan bare brukes i lerretsapper og egendefinerte sider.