Paano Magdagdag ng Mga Chart sa Iyong React App

Paano Magdagdag ng Mga Chart sa Iyong React App
Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Nagbibigay ang mga chart sa iyong mga user ng isang maginhawa, kaakit-akit na paraan ng pagpapakita ng data. Maaari nilang gawing mas madaling maunawaan ang data at maaaring gawing mas interactive ang iyong app.





Mayroong ilang mga paraan upang lumikha ng mga chart sa React, kabilang ang paggamit ng pangunahing CSS o isang library tulad ng React-Vis o React Google Charts.



Paano Gumawa ng Mga Chart sa React Gamit ang CSS

Ang paggawa ng mga chart sa React gamit ang pangunahing CSS ay medyo madali. Ang kailangan mo lang gawin ay lumikha ng isang elemento ng div na may lapad at taas, pagkatapos ay itakda ang kulay ng background sa nais na kulay ng tsart. Halimbawa:





libreng pagtawag app na may iba't ibang numero
MAKEUSEOF VIDEO OF THE DAY 
 import React from 'react'; 
 
const Chart = () => { 
 return ( 
  <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}/> 
 ); 
} 
 
export default Chart;

Sa code sa itaas, na-import namin ang React library. Pagkatapos ay gumawa kami ng function na tinatawag na Chart na nagbabalik ng div na may lapad na 100px, taas na 300px, at kulay ng background na #5D6AFF. Gagawa ito ng pangunahing tsart na may asul na background. Kaya mo rin gumamit ng Material UI o Tailwind CSS sa iyong React app upang lumikha ng mga tsart.

Maaari ka ring lumikha ng maramihang mga chart na may teksto o mga larawan sa loob ng mga div upang lumikha ng mas kumplikadong mga chart.



 import React from 'react'; 
 
const Chart = () => { 
 return ( 
  <div> 
   <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}> 
    <p>Chart 1</p> 
   </div> 
   <div style={{width: '100px', height: '300px', backgroundColor: '#FFCF00'}}> 
    <img src="https://dummyimage.com/40x80/000/0011ff" style={{padding:'100px 30px'}} /> 
   </div> 
  </div> 
 ); 
} 
 
export default Chart;
React app gamit ang mga chart gamit ang css

Mga React Chart Gamit ang React-Vis Library

Ang React-Vis ay isang library na ginawa ng Uber na nagbibigay-daan sa iyong gumawa ng mga chart at graph sa React. Nagbibigay ito ng hanay ng mga bahagi na nagpapadali sa paggawa ng mga chart na may iba't ibang hugis, kulay, at laki. Sinusuportahan din nito ang mga animation at interaktibidad, na makakatulong na gawing mas nakakaengganyo ang iyong mga chart.

Upang magamit ang React-Vis, kailangan mo munang lumikha ng pangunahing React app at i-install ang library. Magagawa mo ito gamit ang sumusunod na utos:



 npm install react-vis

Kapag na-install mo na ang library, maaari kang lumikha ng pangunahing tsart na may sumusunod na code:

 import React, { useState } from 'react'; 
 
import { 
 XYPlot, 
 LineSeries, 
 VerticalGridLines, 
 HorizontalGridLines, 
 XAxis, 
 YAxis 
} from 'react-vis'; 
 
const Chart = () => { 
 const [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 } 
 ]); 
 
 return ( 
  <XYPlot width={300} height={300}> 
   <VerticalGridLines /> 
   <HorizontalGridLines /> 
   <XAxis /> 
   <YAxis /> 
   <LineSeries data={data} /> 
  </XYPlot> 
 ); 
} 
 
export default Chart;

Ini-import ng code sa itaas ang mga library ng React at React-Vis. Pagkatapos ay tinukoy nito ang isang function na tinatawag na Chart na nagbabalik ng XYPlot na may VerticalGridLines, HorizontalGridLines, XAxis, YAxis, at isang LineSeries. Kinukuha ng LineSeries ang hanay ng data, na naglalaman ng mga x at y na coordinate ng mga puntong bumubuo sa linya.



react app na may mga chart gamit ang react-viz

Gamit ang React Google Charts Library

Ang React Google Charts ay isa pang library na nagpapadali sa paggawa ng mga chart sa React. Nagbibigay ito ng isang hanay ng mga bahagi para sa paglikha ng iba't ibang uri ng mga chart, tulad ng mga bar chart, pie chart, at mga line graph. Sinusuportahan din nito ang mga animation at interaktibidad, na makakatulong na gawing mas nakakaengganyo ang iyong mga chart.

Upang magamit ang React Google Charts, kailangan mo munang i-install ang library. Magagawa mo ito gamit ang sumusunod na utos:

saan ako maaaring mag-download ng mga musics nang libre 
 npm install react-google-charts

Kapag na-install mo na ang library, maaari kang lumikha ng pangunahing tsart na may sumusunod na code:

 import React, { useState } from 'react'; 
import { Chart } from 'react-google-charts'; 
 
const MyChart = () => { 
 const [data] = useState([ 
  ['Year', 'Sales', 'Expenses'], 
  ['2013', 1000, 400], 
  ['2014', 1170, 460], 
  ['2015', 660, 1120], 
  ['2016', 1030, 540] 
 ]); 
 
 return ( 
  <Chart 
   width={'400px'} 
   height={'300px'} 
   chartType="Bar" 
   data={data} 
  /> 
 ); 
} 
 
export default MyChart;

Ini-import ng code na ito ang mga library ng react at react-google-charts. Lumilikha ito ng isang function na tinatawag na MyChart na nagbabalik ng isang bahagi ng Tsart. Kinukuha ng bahagi ng Chart ang array ng data, na naglalaman ng mga label at value ng mga puntos na bumubuo sa chart.

react app na may mga chart gamit ang google-react-charts

Mga Disadvantages ng Paggamit ng CSS

Mayroong ilang mga kawalan ng paggamit ng CSS upang lumikha ng mga chart sa React:

  • Mahirap gamitin : Kung gusto mong lumikha ng mga kumplikadong chart, maaaring mahirap gamitin ang CSS.
  • Hindi masyadong flexible: Hindi masyadong flexible ang CSS, kaya maaaring mahirap gumawa ng mga pagbabago sa iyong mga chart.
  • Hindi interactive: Hindi interactive ang mga CSS chart, kaya hindi magagawang makipag-ugnayan sa kanila ng iyong mga user.

Kung gusto mong gumawa ng mga kumplikadong chart, ang React-vis at React-google-charts ay mas mahusay na mga pagpipilian. Gayunpaman, kung gusto mong lumikha ng mga simpleng chart, maaaring isang magandang opsyon ang CSS.

Mga Benepisyo ng Paggamit ng React-Vis

Mayroong ilang mga benepisyo ng paggamit ng React-Vis upang lumikha ng mga chart sa React:

  • Madaling gamitin: Ang React-Vis ay madaling gamitin, kaya maaari kang lumikha ng mga kumplikadong chart nang madali.
  • Lubos na nababaluktot: Ang React-Vis ay lubos na nababaluktot, kaya madali kang makakagawa ng mga pagbabago sa iyong mga chart.
  • Interactive: Interactive ang mga chart ng React-Vis, kaya maaaring makipag-ugnayan sa kanila ang iyong mga user.
  • Animated: Sinusuportahan ng mga chart ng React-Vis ang mga animation, para gawing mas nakakaengganyo ang iyong mga chart.

Kung gusto mong lumikha ng mga kumplikadong chart na interactive at animated, ang React-Vis ay isang magandang pagpipilian.

kung paano tapusin ang isang sulat ng paghingi ng tawad

Mga Benepisyo ng Paggamit ng React Google Charts

Tulad ng React-Vis, may ilang mga benepisyo ng paggamit ng React Google Charts upang lumikha ng mga chart sa React:

  • Madaling gamitin: Madaling gamitin ang React Google Charts, kaya madali kang makagawa ng mga kumplikadong chart.
  • Iba't ibang uri ng tsart: Nagbibigay ang React Google Charts ng iba't ibang uri ng chart, para mapili mo ang pinakamahusay para sa iyong data.
  • Suporta para sa animation: Sinusuportahan ng React Google Charts ang mga animation, para magawa mong mas nakakaengganyo ang iyong mga chart.

Palakihin ang Pakikipag-ugnayan ng User Gamit ang Mga Chart

Ang mga chart ay isang mahusay na paraan upang mailarawan ang data, ngunit maaari mo ring gamitin ang mga ito upang pataasin ang pakikipag-ugnayan ng user. Ang pagdaragdag ng mga animation at interaktibidad sa iyong mga chart ay maaaring gawing mas nakakaengganyo ang mga ito at makakatulong sa iyong mga user na mas maunawaan ang iyong data.

Kaya, kung naghahanap ka ng paraan para pataasin ang pakikipag-ugnayan ng user sa iyong React app, pag-isipang magdagdag ng mga chart. Maaari mo ring i-deploy ang iyong React app sa isang mabilis, secure, at scalable na platform tulad ng Github.