Delen via

DonutChart controle (preview)

  • Artikel

[Dit artikel maakt deel uit van de voorlopige documentatie en kan nog veranderen.]

Ringdiagrammen worden gebruikt om verhoudingen weer te geven, waarmee een gedeeltelijke waarde wordt uitgedrukt in verhouding tot de totale waarde. Dit soort diagrammen zijn het meest geschikt om het percentage afzonderlijke onderdelen ten opzichte van het geheel weer te geven. Het is dan niet belangrijk om de veranderingen in de loop van de tijd te visualiseren. Het zijn cirkelvormige statistische grafieken die in stukken zijn verdeeld om de numerieke verhoudingen te illustreren.

Besturingselement DonutChart.

Dit codecomponent biedt een wrapper rond het besturingselement Fluent UI DonutChart voor gebruik in canvas- en aangepaste pagina's.

Belangrijk

  • Dit is een preview-functie.
  • Preview-functies zijn niet bedoeld voor productiegebruik en bieden mogelijk beperkte functionaliteit. Deze functies zijn beschikbaar vóór een officiële release zodat klanten vroeg toegang kunnen krijgen en feedback kunnen geven.

Notitie

Volledige documentatie en broncode zijn te vinden in de GitHub-codecomponentenrepository .

Eigenschappen

Het besturingselement accepteert de volgende eigenschappen:

  • Titel - Deze waarde geeft de titel van de grafiek aan.

  • HideLabel - Met deze optie bepaalt u of labels in de grafiek worden weergegeven of verborgen.

  • HideTooltip - Met deze optie bepaalt u of tooltips in de grafiek worden weergegeven of verborgen.

  • ShowLabelsInPercentage - Met deze optie bepaalt u of labels in percentages worden weergegeven.

  • InnerRadius - Stel de waarde in voor de binnenste straal van het ringdiagram.

  • ValueInsideDonut - Deze eigenschap geeft de waarde aan die in het ringdiagram moet worden weergegeven.

  • CustomColors - Deze eigenschap wordt gebruikt om aangepaste kleuren op de grafiek weer te geven, indien opgegeven

  • Items - De actie-items die moeten worden weergegeven

    • ItemTitle - De weergavenaam van de specifieke grafiekgegevens (Item).
    • ItemKey - De sleutel die gebruikt wordt om het Item te identificeren. De toetsen moeten uniek zijn.
    • ItemValue - Stel de waarde van de specifieke grafiekgegevens (Item) in.
    • ItemColor - Stel de kleurnaam of HEX-waarde in die moet worden weergegeven voor de specifieke grafiekgegevens (Item).

Notitie

De itemkleur is alleen van toepassing als de eigenschap CustomColors is ingeschakeld.

Toegankelijkheid

  • Toegankelijkheidslabel - Scherm Lezer aria-label

Gebruik

Wijs gegevenswaarden toe aan de overeenkomstige diagrameigenschappen in de eigenschap Items van het besturingselement, zoals gedemonstreerd in de onderstaande formule. Het diagram past de visual automatisch aan zodat deze overeenkomt met de relatieve waarden.

Schakel de eigenschap CustomColors in om consistente kleuren te definiëren.

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

Beperkingen

Dit canvasonderdeel kan alleen worden gebruikt in canvas-apps en aangepaste pagina's.