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.
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
ellerFraction
.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.