Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Kaaviot tarjoavat käyttäjillesi kätevän ja houkuttelevan tavan visualisoida tietoja. Ne voivat helpottaa tietojen ymmärtämistä ja tehdä sovelluksestasi interaktiivisemman.

Reactissa on useita tapoja luoda kaavioita, mukaan lukien perus-CSS tai kirjasto, kuten React-Vis tai React Google Charts.

Kuinka luoda kaavioita reagoimaan CSS: n kanssa

Kaavioiden luominen Reactissa perus-CSS: llä on suhteellisen helppoa. Sinun tarvitsee vain luoda div-elementti leveydellä ja korkeudella ja asettaa sitten taustaväriksi kaavion haluttu väri. Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
konst Kaavio = () => {
palata (


leveys: "100px", korkeus: "300px", taustaväri: '#5D6AFF'}}/>
 );
}
viedäoletuksena Kartoittaa;

Yllä olevassa koodissa toimme React-kirjaston. Sitten loimme funktion nimeltä Kaavio, joka palauttaa div: n, jonka leveys on 100 kuvapistettä, korkeus 300 kuvapistettä ja taustaväri #5D6AFF. Tämä luo peruskaavion sinisellä taustalla. Voit myös

instagram viewer
käytä materiaalin käyttöliittymää tai Tailwind CSS React-sovelluksessasi kaavioiden luomiseen.

Voit myös luoda useita kaavioita, joissa on tekstiä tai kuvia divs-elementtien sisällä, luodaksesi monimutkaisempia kaavioita.

tuonti Reagoi alkaen'reagoi';
konst Kaavio = () => {
palata (
<div>


leveys: "100px", korkeus: "300px", taustaväri: '#5D6AFF'}}>
<s>Kaavio 1s>
div>
leveys: "100px", korkeus: "300px", taustaväri: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"tyyli={{täyte:'100 pikseliä30 kuvapistettä'}} />
div>
div>
 );
}


viedäoletuksena Kartoittaa;

Reaktiokaaviot React-Vis-kirjaston avulla

React-Vis on Uberin luoma kirjasto, jonka avulla voit luoda kaavioita ja kaavioita Reactissa. Se tarjoaa joukon komponentteja, joiden avulla on helppo luoda eri muotoisia, värejä ja kokoisia kaavioita. Se tukee myös animaatioita ja interaktiivisuutta, mikä voi auttaa tekemään kaavioistasi kiinnostavampia.

Jotta voit käyttää React-Visiä, sinun on ensin Luo perus React-sovellus ja asenna kirjasto. Voit tehdä tämän seuraavalla komennolla:

npm Asentaa reagoi-vis

Kun olet asentanut kirjaston, voit luoda peruskaavion seuraavalla koodilla:

tuonti Reagoi, { useState } alkaen'reagoi';
tuonti {
 XYPlot,
 LineSeries,
 VerticalGridLines,
 Horizontal GridLines,
 XAxis,
 YAxis
} alkaen"reagoi";


konst Kaavio = () => {
konst [data] = useState([
 { x: 0, y: 8 },
 { x: 1, y: 5 },
 { x: 2, y: 4 },
 { x: 3, y: 9 },
 { x: 4, y: 1 },
 { x: 5, y: 7 },
 { x: 6, y: 6 },
 { x: 7, y: 3 },
 { x: 8, y: 2 },
 { x: 9, y: 0 }
 ]);


palata (
<XYPlotleveys={300}korkeus={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeriestiedot={data} />
XYPlot>
 );
}
viedäoletuksena Kartoittaa;

Yllä oleva koodi tuo React- ja React-Vis-kirjastot. Sitten se määrittää funktion nimeltä Kaavio, joka palauttaa XYPlotin, jossa on VerticalGridLines, HorizontalGridLines, XAxis, YAxis ja LineSeries. LineSeries ottaa tietotaulukon, joka sisältää linjan muodostavien pisteiden x- ja y-koordinaatit.

React Google Charts -kirjaston käyttäminen

React Google Charts on toinen kirjasto, jonka avulla on helppo luoda kaavioita Reactissa. Se tarjoaa joukon komponentteja erityyppisten kaavioiden, kuten pylväskaavioiden, ympyräkaavioiden ja viivakaavioiden, luomiseen. Se tukee myös animaatioita ja interaktiivisuutta, mikä voi auttaa tekemään kaavioistasi kiinnostavampia.

Jotta voit käyttää React Google Chartsia, sinun on ensin asennettava kirjasto. Voit tehdä tämän seuraavalla komennolla:

npm Asentaa react-google-charts

Kun olet asentanut kirjaston, voit luoda peruskaavion seuraavalla koodilla:

tuonti Reagoi, { useState } alkaen'reagoi';
tuonti { Kaavio } alkaen"react-google-charts";
konst MyChart = () => {
konst [data] = useState([
['Vuosi', 'Myynti', 'Kulut'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


palata (
 leveys={"400px"}
 korkeus={"300px"}
 kaaviotyyppi="Baari"
 data={data}
 />
 );
}
viedäoletuksena MyChart;

Tämä koodi tuo react- ja react-google-charts-kirjastot. Sitten se luo funktion nimeltä MyChart, joka palauttaa kaaviokomponentin. Kaaviokomponentti ottaa tietotaulukon, joka sisältää kaavion muodostavien pisteiden tunnisteet ja arvot.

CSS: n käytön haitat

CSS: n käyttämisessä kaavioiden luomiseen Reactissa on muutamia haittoja:

  • Vaikea käyttää: Jos haluat luoda monimutkaisia ​​kaavioita, CSS: n käyttö voi olla vaikeaa.
  • Ei kovin joustava: CSS ei ole kovin joustava, joten voi olla vaikeaa tehdä muutoksia kaavioihisi.
  • Ei interaktiivinen: CSS-kaaviot eivät ole interaktiivisia, joten käyttäjäsi eivät voi olla vuorovaikutuksessa niiden kanssa.

Jos haluat luoda monimutkaisia ​​kaavioita, React-vis- ja React-google-kaaviot ovat parempia vaihtoehtoja. Jos kuitenkin haluat luoda yksinkertaisia ​​kaavioita, CSS voi olla hyvä vaihtoehto.

React-Visin käytön edut

React-Visin käyttämisestä kaavioiden luomiseen Reactissa on useita etuja:

  • Helppokäyttöinen: React-Vis on helppokäyttöinen, joten voit luoda monimutkaisia ​​kaavioita helposti.
  • Erittäin joustava: React-Vis on erittäin joustava, joten voit tehdä muutoksia kaavioihisi helposti.
  • Interaktiivinen: React-Vis-kaaviot ovat interaktiivisia, joten käyttäjäsi voivat olla vuorovaikutuksessa niiden kanssa.
  • Animoitu: React-Vis-kaaviot tukevat animaatioita, joten voit tehdä kaavioistasi kiinnostavampia.

Jos haluat luoda monimutkaisia ​​interaktiivisia ja animoituja kaavioita, React-Vis on hyvä valinta.

React Google -kaavioiden käytön edut

Aivan kuten React-Visissa, Reactin Google-kaavioiden käyttämisessä kaavioiden luomiseen Reactissa on useita etuja:

  • Helppokäyttöinen: React Google Charts on helppokäyttöinen, joten voit luoda monimutkaisia ​​kaavioita helposti.
  • Erilaiset kaaviotyypit: React Google Charts tarjoaa erilaisia ​​kaaviotyyppejä, joten voit valita tiedoillesi parhaan.
  • Animaatioiden tuki: React Google Charts tukee animaatioita, joten voit tehdä kaavioistasi kiinnostavampia.

Lisää käyttäjien sitoutumista kaavioiden avulla

Kaaviot ovat loistava tapa visualisoida tietoja, mutta voit myös käyttää niitä käyttäjien sitoutumisen lisäämiseen. Animaatioiden ja interaktiivisuuden lisääminen kaavioihisi voi tehdä niistä kiinnostavampia ja auttaa käyttäjiä ymmärtämään tietojasi paremmin.

Joten jos etsit tapaa lisätä käyttäjien sitoutumista React-sovellukseesi, harkitse kaavioiden lisäämistä. Voit myös ottaa React-sovelluksesi käyttöön nopealle, turvalliselle ja skaalautuvalle alustalle, kuten Githubille.