Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Grafieken bieden uw gebruikers een handige, aantrekkelijke manier om gegevens te visualiseren. Ze kunnen gegevens begrijpelijker maken en uw app interactiever maken.

Er zijn verschillende manieren om grafieken te maken in React, inclusief het gebruik van standaard CSS of een bibliotheek zoals React-Vis of React Google Charts.

Hoe grafieken te maken in reactie met CSS

Het maken van grafieken in React met basis-CSS is relatief eenvoudig. Het enige dat u hoeft te doen, is een div-element met een breedte en hoogte te maken en vervolgens de achtergrondkleur in te stellen op de gewenste kleur van het diagram. Bijvoorbeeld:

importeren Reageer van'Reageer';
const Grafiek = () => {
opbrengst (


breedte: '100 pixels', hoogte: '300px', Achtergrond kleur: '#5D6AFF'}}/>
 );
}
exporterenstandaard Grafiek;

In de bovenstaande code hebben we de React-bibliotheek geïmporteerd. Vervolgens hebben we een functie gemaakt met de naam Chart die een div retourneert met een breedte van 100px, een hoogte van 300px en een achtergrondkleur van #5D6AFF. Hiermee wordt een basisgrafiek met een blauwe achtergrond gemaakt. Je kan ook

instagram viewer
gebruik materiaal-UI of Tailwind CSS in je React-app om grafieken te maken.

U kunt ook meerdere grafieken maken met tekst of afbeeldingen in de div's om complexere grafieken te maken.

importeren Reageer van'Reageer';
const Grafiek = () => {
opbrengst (
<div>


breedte: '100 pixels', hoogte: '300px', Achtergrond kleur: '#5D6AFF'}}>
<P>Grafiek 1P>
div>
breedte: '100 pixels', hoogte: '300px', Achtergrond kleur: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"stijl={{vulling:'100px30px'}} />
div>
div>
 );
}


exporterenstandaard Grafiek;

Reageer grafieken met behulp van de React-Vis-bibliotheek

React-Vis is een bibliotheek gemaakt door Uber waarmee u grafieken en grafieken kunt maken in React. Het biedt een set componenten waarmee u eenvoudig grafieken met verschillende vormen, kleuren en formaten kunt maken. Het ondersteunt ook animaties en interactiviteit, wat kan helpen om uw grafieken aantrekkelijker te maken.

Om React-Vis te gebruiken, moet u eerst maak een eenvoudige React-app en installeer de bibliotheek. U kunt dit doen met het volgende commando:

npm installeren reageren-vis

Nadat u de bibliotheek hebt geïnstalleerd, kunt u een basisgrafiek maken met de volgende code:

importeren Reageer, { useState } van'Reageer';
importeren {
 XYplot,
 lijnserie,
 Verticale rasterlijnen,
 Horizontale rasterlijnen,
 XAs,
 YAxis
} van'reageer-vis';


const Grafiek = () => {
const [gegevens] = gebruiksstatus([
 { X: 0, j: 8 },
 { X: 1, j: 5 },
 { X: 2, j: 4 },
 { X: 3, j: 9 },
 { X: 4, j: 1 },
 { X: 5, j: 7 },
 { X: 6, j: 6 },
 { X: 7, j: 3 },
 { X: 8, j: 2 },
 { X: 9, j: 0 }
 ]);


opbrengst (
<XYPlotbreedte={300}hoogte={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAs />
<YAxis />
<LineSeriegegevens={gegevens} />
XYPlot>
 );
}
exporterenstandaard Grafiek;

De bovenstaande code importeert de React- en React-Vis-bibliotheken. Vervolgens wordt een functie genaamd Chart gedefinieerd die een XYPlot retourneert met VerticalGridLines, HorizontalGridLines, XAxis, YAxis en een LineSeries. De LineSeries neemt de data-array, die de x- en y-coördinaten bevat van de punten waaruit de lijn bestaat.

De React Google Charts-bibliotheek gebruiken

React Google Charts is een andere bibliotheek die het gemakkelijk maakt om grafieken te maken in React. Het biedt een set componenten voor het maken van verschillende soorten grafieken, zoals staafdiagrammen, cirkeldiagrammen en lijngrafieken. Het ondersteunt ook animaties en interactiviteit, wat kan helpen om uw grafieken aantrekkelijker te maken.

Om React Google Charts te gebruiken, moet u eerst de bibliotheek installeren. U kunt dit doen met het volgende commando:

npm installeren reactie-google-grafieken

Nadat u de bibliotheek hebt geïnstalleerd, kunt u een basisgrafiek maken met de volgende code:

importeren Reageer, { useState } van'Reageer';
importeren { Grafiek } van'reageer-google-charts';
const MijnChart = () => {
const [gegevens] = gebruiksstatus([
['Jaar', 'Verkoop', 'Uitgaven'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


opbrengst (
 breedte={'400px'}
 hoogte={'300px'}
 grafiekType="Bar"
 gegevens={gegevens}
 />
 );
}
exporterenstandaard MijnChart;

Deze code importeert de bibliotheken reageren en reageren-google-charts. Vervolgens wordt een functie gemaakt met de naam MyChart die een diagramcomponent retourneert. De grafiekcomponent gebruikt de gegevensarray, die de labels en waarden bevat van de punten waaruit de grafiek bestaat.

Nadelen van het gebruik van CSS

Er zijn een paar nadelen aan het gebruik van CSS om grafieken te maken in React:

  • Moeilijk te gebruiken: Als u complexe grafieken wilt maken, kan CSS moeilijk te gebruiken zijn.
  • Niet erg flexibel: CSS is niet erg flexibel, dus het kan moeilijk zijn om wijzigingen aan te brengen in uw grafieken.
  • Niet interactief: CSS-diagrammen zijn niet interactief, dus uw gebruikers kunnen er niet mee communiceren.

Als u complexe grafieken wilt maken, zijn React-vis en React-google-charts betere keuzes. Als u echter eenvoudige grafieken wilt maken, kan CSS een goede optie zijn.

Voordelen van het gebruik van React-Vis

Er zijn verschillende voordelen van het gebruik van React-Vis om grafieken te maken in React:

  • Makkelijk te gebruiken: React-Vis is eenvoudig te gebruiken, dus u kunt gemakkelijk complexe grafieken maken.
  • Zeer flexibel: React-Vis is zeer flexibel, zodat u eenvoudig wijzigingen in uw grafieken kunt aanbrengen.
  • Interactief: React-Vis-diagrammen zijn interactief, zodat uw gebruikers ermee kunnen communiceren.
  • geanimeerd: React-Vis-diagrammen ondersteunen animaties, zodat u uw diagrammen aantrekkelijker kunt maken.

Als u complexe grafieken wilt maken die interactief en geanimeerd zijn, is React-Vis een goede keuze.

Voordelen van het gebruik van React Google Charts

Net als React-Vis zijn er verschillende voordelen van het gebruik van React Google Charts om grafieken te maken in React:

  • Makkelijk te gebruiken: React Google Charts is gebruiksvriendelijk, dus u kunt gemakkelijk complexe grafieken maken.
  • Verschillende soorten diagrammen: React Google Charts biedt verschillende soorten grafieken, zodat u de beste voor uw gegevens kunt kiezen.
  • Ondersteuning voor animatie: React Google Charts ondersteunt animaties, zodat u uw grafieken aantrekkelijker kunt maken.

Verhoog de betrokkenheid van gebruikers met grafieken

Grafieken zijn een geweldige manier om gegevens te visualiseren, maar u kunt ze ook gebruiken om de betrokkenheid van gebruikers te vergroten. Door animaties en interactiviteit aan uw grafieken toe te voegen, kunnen ze aantrekkelijker worden en kunnen uw gebruikers uw gegevens beter begrijpen.

Dus als u op zoek bent naar een manier om de betrokkenheid van gebruikers in uw React-app te vergroten, overweeg dan om grafieken toe te voegen. U kunt uw React-app ook implementeren op een snel, veilig en schaalbaar platform zoals Github.