Jaa

HorizontalBarChart Valvonta (esiversio)

  • Artikkeli

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

Vaakasuora pylväskaavio on kaavio, joka esittää kategorisia tietoja suorakulmaisilla palkeilla, joiden pituudet ovat verrannollisia niiden edustamiin arvoihin. Tämäntyyppinen kaavio on hyödyllinen, kun tarkoituksena on näyttää vertailuja eri luokkien välillä ja näiden luokkien otsikot ovat pitkiä.

HorizontalBarChart-ohjausobjekti.

Tämä koodikomponentti tarjoaa kääreen Fluent UI HorizontalBarChart -ohjausobjektin ympärille käytettäväksi canvas- 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äydellinen dokumentaatio ja lähdekoodi löytyvät GitHub-koodikomponenttien varastosta.

Ominaisuudet

Ohjausobjekti hyväksyy seuraavat ominaisuudet:

  • Otsikko - Tämä arvo tarkoittaa kaavion otsikkoa.
  • HideLabels – Aseta tämän asetuksen arvoksi tosi, jos haluat piilottaa kaavion otsikot.
  • BarHeight - Tämä arvo ilmaisee kaaviossa esitetyn palkin korkeutta.
  • HideTooltip – Aseta tämän asetuksen arvoksi tosi, jos haluat piilottaa kaavion työkaluvihjeet.
  • CustomColors - Määritä tämän asetuksen arvoksi tosi, jos haluat sallia mukautetut värit kaaviossa, jos sellainen on.
  • Variantti – Tämän asetuksen avulla kaavio voidaan näyttää tai-kohdassa Absolute scalePart to whole.
  • ChartDataMode - Tämä vaihtoehto näyttää kunkin palkin arvon tai FractionPercentage.
  • Kohteet – hahmonnettavat toimintokohteet:
    • ItemTitle - Kaavion tietojen (Item) näyttönimi.
    • ItemLegend - Selite, joka liittyy tiettyihin kaaviotietoihin (kohde).
    • ItemValue - Määritä tietyn kaavion datan arvo (kohde).
    • ItemTotalValue - Tietyissä kaaviotiedoissa (Item) käytettävä kokonaisarvo.
    • ItemXPopover - X-akselin ponnahdusikkunateksti tietyille kaaviotiedoille (kohde).
    • ItemYPopover - Y-akselin ponnahdusikkunateksti tietylle kaavion tiedolle (kohde).
    • ItemColor - Määritä värin nimi tai HEX-arvo, joka näytetään tietyille kaaviotiedoille (kohde).

Muistiinpano

  • Kohteen väri on käytössä vain, jos CustomColors-ominaisuus on otettu käyttöön.
  • Piilota otsikot toimii, kun kaavion tyyppi on Absoluuttinen asteikko.
  • Piilota työkaluvihjeet toimii hyvin, kun sovellusta toistetaan (ei studiossa), mutta sitä ei välttämättä hahmonneta studiossa.

Helppokäyttötoiminnot

  • AccessibilityLabel - Näytön Lukija aria-etiketti.

Käyttö

Yhdistä data-arvot ohjausobjektin ominaisuuden vastaaviin kaavion ominaisuuksiin Items seuraavan kaavan mukaisesti.

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

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

Rajoitukset

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