HorizontalBarChart - Stacked Valvonta (esiversio)

[Tämä artikkeli sisältää julkaisua edeltävää materiaalia ja voi muuttua.]

Vaakasuuntainen pinottu pylväskaavio näyttää useita tietosarjoja pinottuina palkkeina, joista jokainen palkki vastaa luokkaa. Palkit pinotaan toistensa viereen, ja niiden pituus vastaa sarjan luokan arvoa.

Tämä koodikomponentti paketoi Fluent UI HorizontalBarChart - Stacked -ohjausobjektin, jota käytetään pohjaan perustuvilla ja mukautetuilla sivuilla.

Tärkeää

• Tämä on esiversiotoiminto.
• Esiversiotoimintoja ei ole tarkoitettu tuotantokäyttöön, ja niiden toiminnot voivat olla rajoitettuja. Nämä toiminnot ovat käytettävissä ennen virallista julkaisua, jotta asiakkaat voivat käyttää niiden ennakkojulkaisua ja antaa palautetta.

Muistiinpano

Täydelliset dokumentaatio- ja lähdekoodit ovat GitHubin koodikomponenttisäilössä.

Ominaisuudet

Ohjausobjekti hyväksyy seuraavat ominaisuudet:

• HideLegend - Tämä arvo ilmaisee, näytetäänkö vai piilotetaanko kaavion selitteet.

• BarHeight - Tämä arvo ilmaisee kaaviossa esitetyn palkin korkeutta.

• HideTooltip – Tämä asetus määrittää, näytetäänkö vai piilotetaanko kaavion työkaluvihjeet.

• CustomColors - Tätä vaihtoehtoa käytetään mukautettujen värien näyttämiseen kaaviossa, jos sellainen on annettu

• Kohteet – hahmonnettavat toimintokohteet

  • ItemTitle - Tiettyjen kaaviotietojen näyttönimi (Item).
  • ItemKey - Avain, jota käytetään kohteen tunnistamiseen. Avaimien on oltava yksilöiviä.
  • ItemValue - Aseta tiettyjen kaaviotietojen arvo (Item).
  • ItemColor - Määritä värin nimi tai HEX-arvo, joka näytetään tietylle kaavion tiedolle (Item).
  • ItemCallout - Aseta ponnahdusikkunassa / työkaluvihjeessä näytettävä arvo.

Muistiinpano

Kohteen väri on käytössä vain, jos CustomColors-ominaisuus on otettu käyttöön.

Helppokäyttötoiminnot

• AccessibilityLabel- Screen Lukija aria-label

Käyttö

Yhdistä tietoarvot ohjausobjektin Items-ominaisuuden vastaaviin kaavion ominaisuuksiin alla olevan kaavan mukaisesti. Kaavio muuttaa visuaalisen tehosteen automaattisesti suhteellisten arvojen mukaan.

CustomColors-ominaisuuden avulla voit määrittää yhtenäiset värit.

Table(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

Rajoitukset

Tätä pohjaan perustuvaa komponenttia voi käyttää vain pohjaan perustuvissa sovelluksissa ja mukautetuilla sivuilla.