Delen via

GaugeChart controle (voorbeeld)

[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 het segment dat de gemeten waarde weergeeft, kan worden aangepast aan bepaalde scenario's of om aan te sluiten bij de kleuren van het merk.

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

Zie GitHub code components repository voor de volledige documentatie en broncode. |

Eigenschappen

Het besturingselement accepteert de volgende eigenschappen:

  • Titel - Deze waarde geeft de titel van het diagram 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 wordt weergegeven.

  • CustomColors - Stel deze waarde in op true om aangepaste kleuren op de grafiek toe te staan, indien opgegeven.

  • 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

  • AccessibilityLabel - Schermlezer 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 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.

  • Last updated on