Dela via


GaugeChart Kontroll (förhandsversion)

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

Dit 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 justera med 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 Hit.

Den här kodkomponenten tillhandahåller en omslutning runt Fluent UI GaugeChart-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.

Kommentar

Fullständig dokumentation och källkod finns i Lagringsplats 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 betecknar det minsta värdet på mätaren.

  • MaxValue - Detta värde betecknar det maximala värdet på 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 förklaringen 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 (Item).
    • 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).

Obs

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

Hjälpmedel

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

Användning

Hastighetsmätare

Det behövs bara en rad för Items. Använd för ChartValue 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 för ChartValue 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"
    }
)

Begränsningar

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