DonutChart Kontrolelement (forhåndsversion)

[Denne artikel er dokumentation til den foreløbige udgivelse. Der kan forekomme ændringer.]

Kransediagrammer bruges til at vise proportioner, som udtrykker en delværdi i forhold til en samlet værdi. Disse typer diagrammer er bedst til at vise procentdelen af individuelle dele i forhold til en helhed, hvor ændringen over tid ikke er vigtig at visualisere. De er cirkulære statistiske grafer opdelt i udsnit for at illustrere numeriske proportioner.

Denne kodekomponent indeholder en ombrydning omkring kontrolelementet Fluent UI DonutChart til brug på lærred og brugerdefinerede sider.

Vigtigt!

• Dette er en forhåndsversion af funktionen.
• Forhåndsversionsfunktionerne er ikke beregnet til produktionsformål og kan have begrænset funktionalitet. Disse funktioner er tilgængelige før en officiel udgivelse, så kunderne kan få tidlig adgang og give feedback.

Bemærk

Fuld dokumentation og kildekode findes i GitHub-kodekomponentlageret.

Egenskaber

Kontrolelementet accepterer følgende egenskaber:

• Titel - Denne værdi angiver titlen på diagrammet.

• HideLabel - Denne indstilling styrer, om etiketter skal vises eller skjules i diagrammet.

• SkjulVærktøjstip - Denne indstilling styrer, om værktøjstip skal vises eller skjules i diagrammet.

• ShowLabelsInPercentage - Denne indstilling styrer, om etiketter skal vises i procent.

• InnerRadius - Indstil værdien for den indre radius af doughnutdiagrammet.

• ValueInsideDonut - Denne egenskab angiver den værdi, der skal vises i doughnut-diagrammet.

• CustomColors – Denne egenskab bruges til at vise brugerdefinerede farver i diagrammet, hvis den angives

• Elementer – de handlingspunkter, der skal gengives

  • ItemTitle - Visningsnavnet på de bestemte diagramdata (Item).
  • ItemKey - Nøglen, der skal bruges til at identificere elementet. Nøglerne skal være entydige.
  • ItemValue - Indstil værdien af de bestemte diagramdata (Item).
  • ItemColor - Indstil farvenavnet eller HEX-værdien, der skal vises for de bestemte diagramdata (Item).

Bemærk

Elementfarven gælder kun, hvis CustomColors egenskaben er slået til.

Tilgængelighed

• AccessibilityLabel - Skærm-Læser aria-etiket

Brug

Knyt dataværdier til de tilsvarende diagramegenskaber i Items objektets egenskab, som vist i nedenstående formel. I diagrammet justeres det visuelle element automatisk, så det stemmer overens med de relative værdier.

Aktiver egenskaben CustomColors for at definere ensartede farver.

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

Begrænsninger

Denne lærredkomponent kan kun bruges i lærredapps og brugerdefinerede sider.