GaugeChart-kontrolelementet (forhåndsversion)

[Denne artikel er dokumentation til den foreløbige udgivelse. Der kan forekomme ændringer.]

Der er to typer målerdiagrammer: Speedometer og vurderingsmåler.

Kontrolelementet GaugeChart.

Speedometeret måler en numerisk værdi i forhold til en helhed, f.eks. lagerkapacitet. Nålen er en valgfri komponent. Farven på det segment, der repræsenterer den værdi, der måles, kan tilpasses, så den passer til bestemte scenarier eller til at tilpasse sig brandingfarver.

Vurderingsmåleren viser status for den aktuelle værdi inden for nogle få foruddefinerede intervaller eller segmenter. Nålen er en påkrævet komponent her.

Denne kodekomponent giver en ombrydning omkring kontrolelementet Fluent UI GaugeChart til brug på lærred og brugerdefinerede sider.

Vigtigt!

  • Dette er en prøveversionsfunktion.
  • Prøveversionsfunktioner er ikke beregnet til produktionsbrug og kan have begrænset funktionalitet. Disse funktioner er tilgængelige før en officiel version, så kunderne kan få tidlig adgang og give feedback.

Bemærkning

Du kan finde den fulde dokumentation og kildekode under GitHub-kodekomponentlageret. |

Egenskaber

Kontrolelementet accepterer følgende egenskaber:

  • Titel - Denne værdi angiver titlen på diagrammet.

  • Underetiket – Denne værdi angiver diagrammets underetiket.

  • ChartValue - Denne værdi angiver den værdi, der skal vises på måleren.

  • MinValue - Denne værdi angiver minimumsværdien af måleren.

  • MaxValue - Denne værdi angiver målerens maksimale værdi.

  • HideMinMax - Denne værdi angiver, om min. og max-værdierne på måleren skal skjules.

  • HideLegend - Denne værdi angiver, om forklaringen skal skjules på måleren.

  • ChartValueFormat - Denne værdi angiver at vise diagramværdi i Percentage eller Fraction.

  • Brugerdefinerede farver – Angiv denne værdi til sand for at tillade brugerdefinerede farver i diagrammet, hvis de er angivet.

  • Elementer – de handlingspunkter, der skal gengives:

    • ItemLegend - Det viste navn på de bestemte diagramdata (Item).
    • ItemSize - Størrelsen på de bestemte diagramdata (Item).
    • ItemColor - Indstil det farvenavn eller HEX-værdi, der skal vises for de bestemte diagramdata (Item).

Bemærkning

Elementfarven gælder kun, hvis CustomColors egenskaben er slået til.

Tilgængelighed

  • AccessibilityLabel - Skærmlæser aria-etiket.

Anvendelse

hastighedsmåler

Der skal kun bruges en række til Items. Brug til ChartValue at angive målpositionen.

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

Bedømmelsesindikator

Angiv intervallerne som egenskaben Items . Summen af alle ItemSize værdier skal summere 100 % af forskellen mellem og MinValueMaxValue. Brug til ChartValue at angive den aktuelle position.

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

Limitations

Denne lærredkomponent kan kun bruges i lærredapps og brugerdefinerede sider.

  • Last updated on