Jaa

DonutChart Valvonta (esiversio)

  • Artikkeli

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

Donitsikaavioita käytetään osoittamaan osuutta, joka ilmaisee osittaisen arvon kokonaisarvoon verrattuna. Tämäntyyppiset kaaviot on parasta näyttää yksittäisten osien prosenttiosuus verrattuna kokonaisuuteen, jossa ajan myötä tapahtuvaa muutosta ei ole tärkeää visualisoida. Ne ovat pyöreitä tilastografiikoita, jotka on jaettu viipaleisiin numeerisen osuuden havainnollistamiseksi.

DonutChart-ohjausobjekti.

Tämä koodikomponentti tarjoaa Fluent UI DonutChart -ohjausobjektin ympärille kääreen 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.

  • HideLabel – Tämä asetus määrittää, näytetäänkö vai piilotetaanko kaavion otsikot.

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

  • ShowLabelsInPercent – Tämä asetus määrittää, näytetäänkö otsikot prosentteina.

  • InnerRadius - Aseta donitsikaavion sisäsäteen arvo.

  • ValueInsideDonut - Tämä ominaisuus tarkoittaa donitsikaaviossa näytettävää arvoa.

  • CustomColors - Tätä ominaisuutta 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).

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(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

Rajoitukset

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