Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Diagrammid pakuvad teie kasutajatele mugavat ja atraktiivset viisi andmete visualiseerimiseks. Need võivad muuta andmed hõlpsamini mõistetavaks ja muuta teie rakenduse interaktiivsemaks.

Reactis on diagrammide loomiseks mitu võimalust, sealhulgas põhi-CSS-i või teeki, näiteks React-Vis või React Google Charts, kasutamine.

Kuidas luua CSS-iga reageerimiseks diagramme

Diagrammide loomine Reactis lihtsa CSS-i abil on suhteliselt lihtne. Kõik, mida pead tegema, on luua laiuse ja kõrgusega div-element ning seejärel määrata taustavärviks diagrammi soovitud värv. Näiteks:

importida Reageerige alates'reageeri';
konst Diagramm = () => {
tagasi (


laius: "100px", kõrgus: "300 pikslit", taustavärv: '#5D6AFF'}}/>
 );
}
eksportidavaikimisi Diagramm;

Ülaltoodud koodis importisime Reacti teegi. Seejärel lõime funktsiooni nimega Chart, mis tagastab div laiusega 100 pikslit, kõrgusega 300 pikslit ja taustavärviga #5D6AFF. See loob sinise taustaga põhidiagrammi. Sa saad ka

instagram viewer
kasutage materjali kasutajaliidest või Tailwind CSS teie Reacti rakenduses diagrammide loomiseks.

Keerulisemate diagrammide loomiseks saate luua ka mitu graafikut, mis sisaldavad div-de sees teksti või pilte.

importida Reageerige alates'reageeri';
konst Diagramm = () => {
tagasi (
<div>


laius: "100px", kõrgus: "300 pikslit", taustavärv: '#5D6AFF'}}>
<lk>Diagramm 1lk>
div>
laius: "100px", kõrgus: "300 pikslit", taustavärv: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"stiilis={{täide:'100 pikslit30 pikslit'}} />
div>
div>
 );
}


eksportidavaikimisi Diagramm;

Reaktsioonidiagrammid React-Vis teegi abil

React-Vis on Uberi loodud teek, mis võimaldab luua Reactis diagramme ja graafikuid. See pakub komplekti komponente, mis muudavad erineva kuju, värvi ja suurusega diagrammide loomise lihtsaks. Samuti toetab see animatsioone ja interaktiivsust, mis võib aidata teie diagramme kaasahaaravamaks muuta.

React-Visi kasutamiseks peate esmalt seda tegema luua põhiline Reacti rakendus ja installige raamatukogu. Seda saate teha järgmise käsuga:

npm installida reageerida-vis

Kui olete teegi installinud, saate luua põhidiagrammi järgmise koodiga:

importida Reageerige, { useState } alates'reageeri';
importida {
 XYPlot,
 LineSeries,
 VerticalGridLines,
 Horisontaalsed võrgujooned,
 XAxis,
 YAxis
} alates'reageerida-vist';


konst Diagramm = () => {
konst [andmed] = 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 }
 ]);


tagasi (
<XYPlotlaius={300}kõrgus={300}>
<VerticalGridLines />
<Horisontaalsed võrgujooned />
<XAxis />
<YAxis />
<LineSeriesandmeid={data} />
XYPlot>
 );
}
eksportidavaikimisi Diagramm;

Ülaltoodud kood impordib teegid React ja React-Vis. Seejärel määratleb see funktsiooni nimega Chart, mis tagastab XYPloti koos VerticalGridLines, HorizontalGridLines, XAxis, YAxis ja LineSeries. LineSeries võtab andmemassiivi, mis sisaldab joone moodustavate punktide x- ja y-koordinaate.

React Google Charts Library kasutamine

React Google Charts on veel üks teek, mis teeb Reactis diagrammide loomise lihtsaks. See pakub komponentide komplekti erinevat tüüpi diagrammide, näiteks tulpdiagrammide, sektordiagrammide ja joondiagrammide loomiseks. Samuti toetab see animatsioone ja interaktiivsust, mis võib aidata teie diagramme kaasahaaravamaks muuta.

Rakenduse React Google Charts kasutamiseks peate esmalt installima raamatukogu. Seda saate teha järgmise käsuga:

npm installida react-google-charts

Kui olete teegi installinud, saate luua põhidiagrammi järgmise koodiga:

importida Reageerige, { useState } alates'reageeri';
importida { diagramm } alates'react-google-charts';
konst MinuChart = () => {
konst [andmed] = useState([
['aasta', "Müük", "kulud"],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


tagasi (
 laius={"400 pikslit"}
 kõrgus={"300 pikslit"}
 diagrammi tüüp="baar"
 andmed={andmed}
 />
 );
}
eksportidavaikimisi MinuChart;

See kood impordib teegid react ja react-google-charts. Seejärel loob see funktsiooni nimega MyChart, mis tagastab diagrammi komponendi. Diagrammi komponent võtab andmemassiivi, mis sisaldab diagrammi moodustavate punktide silte ja väärtusi.

CSS-i kasutamise puudused

CSS-i kasutamisel Reactis diagrammide loomiseks on mõned puudused:

  • Raske kasutada: kui soovite luua keerulisi diagramme, võib CSS-i kasutamine olla keeruline.
  • Mitte eriti paindlik: CSS ei ole eriti paindlik, mistõttu võib diagrammides muudatuste tegemine olla keeruline.
  • Pole interaktiivne: CSS-i diagrammid ei ole interaktiivsed, seega ei saa teie kasutajad nendega suhelda.

Kui soovite luua keerukaid diagramme, on React-vis ja React-google-diagrammid paremad valikud. Kui aga soovite luua lihtsaid diagramme, võib CSS olla hea valik.

React-Visi kasutamise eelised

React-Visi kasutamisel Reactis diagrammide loomiseks on mitmeid eeliseid.

  • Lihtne kasutada: React-Visi on lihtne kasutada, nii et saate hõlpsalt luua keerukaid diagramme.
  • Väga paindlik: React-Vis on väga paindlik, nii et saate oma diagramme hõlpsalt muuta.
  • Interaktiivne: React-Vis diagrammid on interaktiivsed, nii et teie kasutajad saavad nendega suhelda.
  • Animeeritud: React-Vis diagrammid toetavad animatsioone, et saaksite oma diagramme kaasahaaravamaks muuta.

Kui soovite luua keerukaid interaktiivseid ja animeeritud diagramme, on React-Vis hea valik.

React Google'i diagrammide kasutamise eelised

Nii nagu React-Vis, on ka Reacti Google'i diagrammide kasutamisel Reactis diagrammide loomiseks mitmeid eeliseid.

  • Lihtne kasutada: React Google'i diagramme on lihtne kasutada, nii et saate hõlpsalt luua keerukaid diagramme.
  • Erinevat tüüpi diagrammid: React Google Charts pakub erinevaid diagrammitüüpe, nii et saate valida oma andmete jaoks parima.
  • Animatsiooni tugi: React Google Charts toetab animatsioone, et saaksite oma diagramme kaasahaaravamaks muuta.

Suurendage kasutajate seotust diagrammidega

Diagrammid on suurepärane viis andmete visualiseerimiseks, kuid saate neid kasutada ka kasutajate seotuse suurendamiseks. Animatsioonide ja interaktiivsuse lisamine diagrammidesse võib muuta need kaasahaaravamaks ja aidata kasutajatel teie andmeid paremini mõista.

Seega, kui otsite viisi, kuidas suurendada kasutajate seotust oma rakenduses React, kaaluge diagrammide lisamist. Saate oma Reacti rakenduse juurutada ka kiirele, turvalisele ja skaleeritavale platvormile, nagu Github.