GaugeChart controle (preview)

Artikel
10/16/2024

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

Er zijn twee soorten meettabellen: snelheidsmeters en beoordelingsmeters.

GaugeChart-besturingselement.

De snelheidsmeter meet een numerieke waarde ten opzichte van een geheel, bijvoorbeeld de opslagcapaciteit. De naald is een optioneel onderdeel. De kleur van de segment die de gemeten waarde weergeeft, kan worden aangepast aan bepaalde scenario's of aan uitlijnen met merkkleuren.

De beoordelingsmeter geeft de status van de huidige waarde weer binnen een aantal vooraf gedefinieerde bereiken of segmenten. De naald is hier een noodzakelijk onderdeel.

Dit codecomponent biedt een wrapper rond het besturingselement Fluent UI GaugeChart 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

Voor de volledige documentatie en broncode, zie GitHub code components repository. |

Eigenschappen

Het besturingselement accepteert de volgende eigenschappen:

Titel - Deze waarde geeft de titel van de grafiek aan.
Sublabel - Deze waarde geeft het sublabel van de grafiek aan.
ChartValue - Deze waarde geeft de waarde aan die op de meter moet worden weergegeven.
MinValue - Deze waarde geeft de minimumwaarde van de meter aan.
MaxValue - Deze waarde geeft de maximumwaarde van de meter aan.
HideMinMax - Deze waarde geeft aan of de minimum- en maximumwaarden op de meter moeten worden verborgen.
HideLegend - Deze waarde geeft aan of de legenda op de meter moet worden verborgen.
ChartValueFormat - Deze waarde geeft aan of de grafiekwaarde in Percentage of Fraction moet worden weergegeven.
CustomColors - Stel deze waarde in op true om aangepaste kleuren in de grafiek toe te staan, indien beschikbaar.
Items - De actie-items die moeten worden weergegeven:
- ItemLegend - De weergavenaam van de specifieke grafiekgegevens (Item).
- ItemSize - De grootte van de specifieke grafiekgegevens (Item).
- 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

Snelheidsmeter

Er is slechts één rij nodig voor Items. Gebruik de ChartValue om de doelpositie aan te geven.

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

Beoordelingsmeter

Geef de bereiken op als de Items eigenschap. De som van alle ItemSize waarden moet gelijk zijn aan 100% van het verschil tussen de MinValue en MaxValue. Gebruik de ChartValue om de huidige positie aan te geven.

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

Beperkingen

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

Delen via