Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Diagramos suteikia vartotojams patogų ir patrauklų duomenų vizualizavimo būdą. Jie gali padėti lengviau suprasti duomenis ir padaryti jūsų programą interaktyvesnę.

Yra keletas būdų, kaip kurti diagramas „React“, įskaitant pagrindinio CSS arba bibliotekos, pvz., „React-Vis“ arba „React Google Charts“, naudojimą.

Kaip sukurti diagramas reaguojant su CSS

Sukurti diagramas „React“ naudojant pagrindinį CSS yra gana paprasta. Viskas, ką jums reikia padaryti, tai sukurti „div“ elementą su pločiu ir aukščiu, tada nustatyti fono spalvą į norimą diagramos spalvą. Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
konst Diagrama = () => {
grąžinti (


plotis: „100 piks.“, aukščio: „300 piks.“, fono spalva: „#5D6AFF“}}/>
 );
}
eksportuotinumatytas Diagrama;

Aukščiau pateiktame kode importavome „React“ biblioteką. Tada sukūrėme funkciją diagrama, kuri grąžina 100 pikselių pločio, 300 pikselių aukščio ir #5D6AFF fono spalvą. Taip bus sukurta pagrindinė diagrama mėlynu fonu. Tu taip pat gali

instagram viewer
naudoti medžiagos vartotojo sąsają arba Tailwind CSS programoje „React“. diagramoms kurti.

Taip pat galite sukurti kelias diagramas su tekstu arba vaizdais, esančius divuose, kad sukurtumėte sudėtingesnes diagramas.

importuoti Reaguoti iš'reaguoti';
konst Diagrama = () => {
grąžinti (
<div>


plotis: „100 piks.“, aukščio: „300 piks.“, fono spalva: „#5D6AFF“}}>
<p>1 diagramap>
div>
plotis: „100 piks.“, aukščio: „300 piks.“, fono spalva: „#FFCF00“}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"stilius={{padding:'100 piks30 piks'}} />
div>
div>
 );
}


eksportuotinumatytas Diagrama;

Reakcijų diagramos naudojant React-Vis biblioteką

„React-Vis“ yra „Uber“ sukurta biblioteka, leidžianti „React“ kurti diagramas ir grafikus. Jame pateikiamas komponentų rinkinys, leidžiantis lengvai kurti skirtingų formų, spalvų ir dydžių diagramas. Ji taip pat palaiko animaciją ir interaktyvumą, o tai gali padėti jūsų diagramoms padaryti patrauklesnes.

Norėdami naudoti React-Vis, pirmiausia turite sukurti pagrindinę „React“ programą ir įdiegti biblioteką. Tai galite padaryti naudodami šią komandą:

npm diegti reaguoti-vis

Įdiegę biblioteką galite sukurti pagrindinę diagramą su šiuo kodu:

importuoti Reaguoti, { useState } iš'reaguoti';
importuoti {
 XYPlot,
 LineSeries,
 Vertikalios tinklelio linijos,
 Horizontalios tinklelio linijos,
 XAxis,
 YAxis
} iš"reaguoti-vis";


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


grąžinti (
<XYPlotplotis={300}aukščio={300}>
<Vertikalios tinklelio linijos />
<Horizontalios tinklelio linijos />
<XAxis />
<YAxis />
<LineSeriesduomenis={duomenys} />
XYPlot>
 );
}
eksportuotinumatytas Diagrama;

Aukščiau pateiktas kodas importuoja „React“ ir „React-Vis“ bibliotekas. Tada ji apibrėžia funkciją, vadinamą diagrama, kuri grąžina XYPlot su vertikaliomis tinklelio linijomis, horizontaliosiomis tinklelio linijomis, XAxis, YAxis ir linijų serija. LineSeries paima duomenų masyvą, kuriame yra taškų, sudarančių liniją, x ir y koordinatės.

„React Google Charts“ bibliotekos naudojimas

React Google Charts yra dar viena biblioteka, kuri leidžia lengvai kurti diagramas React. Jame pateikiamas komponentų rinkinys, skirtas kurti įvairių tipų diagramas, pvz., juostines diagramas, skritulines diagramas ir linijines diagramas. Ji taip pat palaiko animaciją ir interaktyvumą, o tai gali padėti jūsų diagramoms padaryti patrauklesnes.

Norėdami naudoti „React Google Charts“, pirmiausia turite įdiegti biblioteką. Tai galite padaryti naudodami šią komandą:

npm diegti react-google-charts

Įdiegę biblioteką galite sukurti pagrindinę diagramą su šiuo kodu:

importuoti Reaguoti, { useState } iš'reaguoti';
importuoti { diagrama } iš'react-google-charts';
konst Mano diagrama = () => {
konst [duomenys] = useState([
['Metai', "Pardavimai", "išlaidos"],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


grąžinti (
 plotis={„400 piks.“}
 aukštis={„300 piks.“}
 diagramos tipas ="Baras"
 duomenys={duomenys}
 />
 );
}
eksportuotinumatytas MyChart;

Šis kodas importuoja react ir react-google-charts bibliotekas. Tada sukuriama funkcija MyChart, kuri grąžina diagramos komponentą. Diagramos komponentas paima duomenų masyvą, kuriame yra diagramą sudarančių taškų etiketės ir reikšmės.

CSS naudojimo trūkumai

Yra keletas CSS naudojimo trūkumų kuriant diagramas „React“:

  • Sunku naudoti: Jei norite sukurti sudėtingas diagramas, CSS gali būti sunku naudoti.
  • Nelabai lankstus: CSS nėra labai lankstus, todėl gali būti sunku pakeisti diagramas.
  • Neinteraktyvus: CSS diagramos nėra interaktyvios, todėl jūsų vartotojai negalės su jomis bendrauti.

Jei norite sukurti sudėtingas diagramas, „React-vis“ ir „React-google“ diagramos yra geresni pasirinkimas. Tačiau, jei norite sukurti paprastas diagramas, CSS gali būti geras pasirinkimas.

„React-Vis“ naudojimo pranašumai

Yra keletas „React-Vis“ pranašumų kuriant diagramas „React“:

  • Paprasta naudoti: „React-Vis“ paprasta naudoti, todėl galite lengvai kurti sudėtingas diagramas.
  • Labai lankstus: „React-Vis“ yra labai lankstus, todėl galite lengvai keisti diagramas.
  • Interaktyvus: „React-Vis“ diagramos yra interaktyvios, todėl jūsų vartotojai gali su jomis bendrauti.
  • Animuotas: „React-Vis“ diagramos palaiko animaciją, todėl galite padaryti diagramas patrauklesnes.

Jei norite sukurti sudėtingas interaktyvias ir animuotas diagramas, „React-Vis“ yra geras pasirinkimas.

„React Google Charts“ naudojimo pranašumai

Kaip ir „React-Vis“, naudojant „React Google Charts“, kuriant diagramas „React“, yra keletas pranašumų:

  • Paprasta naudoti: React Google diagramas lengva naudoti, todėl galite lengvai kurti sudėtingas diagramas.
  • Skirtingi diagramų tipai: React Google Charts pateikia skirtingus diagramų tipus, todėl galite pasirinkti geriausią savo duomenims.
  • Animacijos palaikymas: React Google Charts palaiko animaciją, todėl galite padaryti diagramas patrauklesnes.

Padidinkite naudotojų įsitraukimą naudodami diagramas

Diagramos yra puikus būdas vizualizuoti duomenis, tačiau jas taip pat galite naudoti norėdami padidinti vartotojų įsitraukimą. Animacijos ir interaktyvumo pridėjimas prie diagramų gali padaryti jas patrauklesnes ir padėti naudotojams geriau suprasti jūsų duomenis.

Taigi, jei ieškote būdo, kaip padidinti naudotojų įtraukimą į programą „React“, apsvarstykite galimybę pridėti diagramas. Taip pat galite įdiegti savo „React“ programą greitoje, saugioje ir keičiamo dydžio platformoje, pvz., „Github“.