Dela via

DonutChart Kontroll (förhandsversion)

  • Artikel

[Den här artikeln är en förhandsversion av dokumentationen och kan komma att ändras.]

Ringdiagram används för att visa proportioner, vilket uttrycker ett partiellt värde i jämförelse med ett totalt värde. Dessa typer av diagram är bäst för att visa procentandelen av enskilda delar i jämförelse med en helhet, där förändringen över tid inte är viktig att visualisera. De är cirkulär statistisk grafik uppdelad i skivor för att illustrera numeriska proportioner.

DonutChart-kontroll.

Den här kodkomponenten tillhandahåller en omslutning runt Fluent UI DonutChart-kontrollen för användning på arbetsytor och anpassade sidor.

Viktigt

  • Detta är en förhandsversion.
  • Förhandsversionsfunktioner ska inte användas i produktion och funktionerna kan vara begränsade. funktionerna är tillgängliga före den officiella publiceringen så att kunderna kan få tillgång tidigare och ge oss feedback.

Obs

Fullständig dokumentation och källkod som finns i lagringsplatsen för GitHub-kodkomponenter.

Egenskaper

Kontrollen accepterar följande egenskaper:

  • Titel – Det här värdet anger diagrammets titel.

  • HideLabel - Det här alternativet styr om etiketter ska visas eller döljas i diagrammet.

  • HideTooltip - Det här alternativet styr om verktygstips ska visas eller döljas i diagrammet.

  • ShowLabelsInPercentage – Det här alternativet styr om etiketter ska visas i procent.

  • InnerRadius - Ställ in värdet för den inre radien i ringdiagrammet.

  • ValueInsideDonut – Den här egenskapen anger det värde som ska visas i ringdiagrammet.

  • CustomColors – Den här egenskapen används för att visa anpassade färger i diagrammet om det finns

  • Objekt – De åtgärdsobjekt som ska återges

    • ItemTitle - visningsnamnet för specifika diagramdata (objekt).
    • ItemKey – Nyckeln som ska användas för att identifiera objektet. Nycklarna måste vara unika.
    • ItemValue - Ställ in värdet för specifika diagramdata (Item).
    • ItemColor - Ställ in färgnamnet eller HEX-värdet som ska visas för den specifika sjökortsdatan (objekt).

Obs

Objektfärg tillämpas endast om CustomColors egenskapen är aktiverad.

Hjälpmedel

  • AccessibilityLabel - Skärmläsare, läsare, aria-etikett

Användning

Mappa datavärden till motsvarande diagramegenskaper i Items för kontrollens, vilket visas i formeln nedan. Diagrammet justerar automatiskt de visuella elementen för att matcha de relativa värdena.

Aktivera egenskapen CustomColors för att definiera konsekventa färger.

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

Begränsningar

Den här arbetsytekomponenten kan endast användas i arbetsyteappar och på anpassade sidor.