Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Diagrammer gir brukerne en praktisk og attraktiv måte å visualisere data på. De kan gjøre data enklere å forstå og kan gjøre appen din mer interaktiv.

Det er flere måter å lage diagrammer på i React, inkludert å bruke grunnleggende CSS eller et bibliotek som React-Vis eller React Google Charts.

Hvordan lage diagrammer i React With CSS

Å lage diagrammer i React ved å bruke grunnleggende CSS er relativt enkelt. Alt du trenger å gjøre er å lage et div-element med en bredde og høyde, og deretter sette bakgrunnsfargen til ønsket farge på diagrammet. For eksempel:

import Reagere fra'reagere';
konst Diagram = () => {
komme tilbake (


bredde: '100px', høyde: '300px', bakgrunnsfarge: '#5D6AFF'}}/>
 );
}
eksportmisligholde Diagram;

I koden ovenfor importerte vi React-biblioteket. Vi opprettet deretter en funksjon kalt Chart som returnerer en div med en bredde på 100px, en høyde på 300px og en bakgrunnsfarge på #5D6AFF. Dette vil lage et grunnleggende diagram med blå bakgrunn. Du kan også

instagram viewer
bruk Material UI eller Tailwind CSS i React-appen din å lage diagrammer.

Du kan også lage flere diagrammer med tekst eller bilder inne i divene for å lage mer komplekse diagrammer.

import Reagere fra'reagere';
konst Diagram = () => {
komme tilbake (
<div>


bredde: '100px', høyde: '300px', bakgrunnsfarge: '#5D6AFF'}}>
<s>Diagram 1s>
div>
bredde: '100px', høyde: '300px', bakgrunnsfarge: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"stil={{polstring:'100 piksler30 piksler'}} />
div>
div>
 );
}


eksportmisligholde Diagram;

React-diagrammer ved hjelp av React-Vis-biblioteket

React-Vis er et bibliotek laget av Uber som lar deg lage diagrammer og grafer i React. Den gir et sett med komponenter som gjør det enkelt å lage diagrammer med forskjellige former, farger og størrelser. Den støtter også animasjoner og interaktivitet, noe som kan bidra til å gjøre diagrammene mer engasjerende.

For å bruke React-Vis må du først lage en grunnleggende React-app og installer biblioteket. Du kan gjøre dette med følgende kommando:

npm installere reagere-vis

Når du har installert biblioteket, kan du lage et grunnleggende diagram med følgende kode:

import Reager, { useState } fra'reagere';
import {
 XYPlot,
 LineSeries,
 VerticalGridLines,
 Horisontale rutenettlinjer,
 XAxis,
 YAxis
} fra'reagere-vis';


konst Diagram = () => {
konst [data] = brukState([
 { 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 }
 ]);


komme tilbake (
<XYPlotbredde={300}høyde={300}>
<VerticalGridLines />
<Horisontale rutenettlinjer />
<XAxis />
<YAxis />
<LineSeriesdata={data} />
XYPlot>
 );
}
eksportmisligholde Diagram;

Koden ovenfor importerer React- og React-Vis-bibliotekene. Den definerer deretter en funksjon kalt diagram som returnerer et XYPlot med VerticalGridLines, HorizontalGridLines, XAxis, YAxis og en LineSeries. LineSeries tar datamatrisen, som inneholder x- og y-koordinatene til punktene som utgjør linjen.

Bruke React Google Charts Library

React Google Charts er et annet bibliotek som gjør det enkelt å lage diagrammer i React. Den gir et sett med komponenter for å lage forskjellige typer diagrammer, for eksempel søylediagrammer, sektordiagrammer og linjediagrammer. Den støtter også animasjoner og interaktivitet, noe som kan bidra til å gjøre diagrammene mer engasjerende.

For å bruke React Google Charts, må du først installere biblioteket. Du kan gjøre dette med følgende kommando:

npm installere reager-google-charts

Når du har installert biblioteket, kan du lage et grunnleggende diagram med følgende kode:

import Reager, { useState } fra'reagere';
import { Diagram } fra'reager-google-charts';
konst MyChart = () => {
konst [data] = brukState([
['År', "Salg", "Utgifter"],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


komme tilbake (
 width={'400px'}
 høyde={'300px'}
 chartType="Bar"
 data={data}
 />
 );
}
eksportmisligholde MyChart;

Denne koden importerer react- og react-google-charts-bibliotekene. Den lager deretter en funksjon kalt MyChart som returnerer en diagramkomponent. Diagram-komponenten tar datamatrisen, som inneholder etikettene og verdiene til punktene som utgjør diagrammet.

Ulemper ved å bruke CSS

Det er noen ulemper ved å bruke CSS for å lage diagrammer i React:

  • Vanskelig å bruke: Hvis du vil lage komplekse diagrammer, kan CSS være vanskelig å bruke.
  • Ikke veldig fleksibel: CSS er ikke veldig fleksibel, så det kan være vanskelig å gjøre endringer i diagrammene dine.
  • Ikke interaktiv: CSS-diagrammer er ikke interaktive, så brukerne dine vil ikke kunne samhandle med dem.

Hvis du vil lage komplekse diagrammer, er React-vis og React-google-charts bedre valg. Men hvis du ønsker å lage enkle diagrammer, kan CSS være et godt alternativ.

Fordeler med å bruke React-Vis

Det er flere fordeler med å bruke React-Vis for å lage diagrammer i React:

  • Lett å bruke: React-Vis er enkel å bruke, så du kan enkelt lage komplekse diagrammer.
  • Svært fleksibel: React-Vis er svært fleksibel, slik at du enkelt kan gjøre endringer i diagrammene dine.
  • Interaktiv: React-Vis-diagrammer er interaktive, slik at brukerne dine kan samhandle med dem.
  • Animert: React-Vis-diagrammer støtter animasjoner, slik at du kan gjøre diagrammene mer engasjerende.

Hvis du vil lage komplekse diagrammer som er interaktive og animerte, er React-Vis et godt valg.

Fordeler med å bruke React Google Charts

Akkurat som React-Vis, er det flere fordeler ved å bruke React Google Charts for å lage diagrammer i React:

  • Lett å bruke: React Google Charts er enkelt å bruke, så du kan enkelt lage komplekse diagrammer.
  • Ulike diagramtyper: React Google Charts tilbyr forskjellige diagramtyper, slik at du kan velge den beste for dataene dine.
  • Støtte for animasjon: React Google Charts støtter animasjoner, slik at du kan gjøre diagrammene mer engasjerende.

Øk brukerengasjementet med diagrammer

Diagrammer er en fin måte å visualisere data på, men du kan også bruke dem til å øke brukerengasjementet. Å legge til animasjoner og interaktivitet i diagrammene dine kan gjøre dem mer engasjerende og kan hjelpe brukerne dine å forstå dataene dine bedre.

Så hvis du leter etter en måte å øke brukerengasjementet i React-appen din, bør du vurdere å legge til diagrammer. Du kan også distribuere React-appen din til en rask, sikker og skalerbar plattform som Github.