GaugeChart Kontroll (förhandsversion)

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

Det finns två typer av mätardiagram: Hastighetsmätare och betygsmätare.

GaugeChart-kontroll.

Hastighetsmätaren mäter ett numeriskt värde mot en helhet, som lagringskapacitet. Nålen är en valfri komponent. Färgen på segmentet som representerar det värde som mäts kan anpassas för att passa vissa scenarier eller för att anpassas till varumärkesfärger.

Betygsmätaren visar status för det aktuella värdet inom några fördefinierade intervall eller segment. Nålen är en nödvändig komponent här.

Den här kodkomponenten tillhandahåller en inkapsling av Fluent UI GaugeChart-kontrollen för användning på dukar och anpassade sidor.

Important

  • Det här är en förhandsgranskningsfunktion.
  • Förhandsgranskningsfunktioner ska inte användas i produktion, och funktionerna kan vara begränsade. Dessa funktioner är tillgängliga före en officiell release så att kunderna kan få tidig tillgång och ge feedback.

Anmärkning

Den fullständiga dokumentationen och källkoden finns i databasen för GitHub-kodkomponenter. |

Egenskaper

Kontrollen accepterar följande egenskaper:

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

  • Underetikett - Det här värdet anger underetikett för diagrammet.

  • ChartValue - Detta värde betecknar det värde som ska visas på mätaren.

  • MinValue - Detta värde anger det minsta värdet för mätaren.

  • MaxValue - Detta värde anger det maximala värdet för mätaren.

  • HideMinMax - Detta värde anger om min- och maxvärdena ska döljas på mätaren.

  • HideLegend - Det här värdet anger om legenden ska döljas på mätaren.

  • ChartValueFormat - Detta värde anger att diagramvärdet ska visas i Percentage eller Fraction.

  • CustomColors – Ställ in det här värdet på true för att tillåta anpassade färger i diagrammet om det finns.

  • Objekt – Åtgärdsalternativen som ska återges:

    • ItemLegend – Visningsnamnet för specifika diagramdata (Objekt).
    • ItemSize - Storleken på specifika diagramdata (Item).
    • ItemColor - Ställ in färgnamnet eller HEX-värdet som ska visas för specifika sjökortsdata (Objekt).

Anmärkning

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

Accessibility

  • AccessibilityLabel - aria-label för skärmläsare.

Usage

Hastighetsmätare

Det behövs bara en rad för Items. Använd ChartValue för att ange målpositionen.

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

Betygsmätare

Ange intervallen som Items egenskap. Summan av alla ItemSize värden måste summera upp till 100 % av skillnaden mellan MinValue och MaxValue. Använd ChartValue för att ange den aktuella positionen.

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

Limitations

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

  • Last updated on