Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Diagrammer giver dine brugere en bekvem, attraktiv måde at visualisere data på. De kan gøre data lettere at forstå og kan gøre din app mere interaktiv.

Der er flere måder at oprette diagrammer på i React, herunder ved at bruge grundlæggende CSS eller et bibliotek som React-Vis eller React Google Charts.

Sådan opretter du diagrammer i React With CSS

Det er relativt nemt at oprette diagrammer i React ved hjælp af grundlæggende CSS. Alt du skal gøre er at oprette et div-element med en bredde og højde, og derefter indstille baggrundsfarven til den ønskede farve på diagrammet. For eksempel:

importere Reagere fra'reagere';
konst Diagram = () => {
Vend tilbage (


bredde: '100px', højde: '300px', baggrundsfarve: '#5D6AFF'}}/>
 );
}
eksportStandard Diagram;

I ovenstående kode importerede vi React-biblioteket. Vi lavede derefter en funktion kaldet Chart, som returnerer en div med en bredde på 100px, en højde på 300px og en baggrundsfarve på #5D6AFF. Dette vil skabe et grundlæggende diagram med en blå baggrund. Du kan også

instagram viewer
brug Materiale UI eller Tailwind CSS i din React-app at lave diagrammer.

Du kan også oprette flere diagrammer med tekst eller billeder inde i div'erne for at skabe mere komplekse diagrammer.

importere Reagere fra'reagere';
konst Diagram = () => {
Vend tilbage (
<div>


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


eksportStandard Diagram;

React-diagrammer ved hjælp af React-Vis-biblioteket

React-Vis er et bibliotek skabt af Uber, der giver dig mulighed for at oprette diagrammer og grafer i React. Det giver et sæt komponenter, der gør det nemt at oprette diagrammer med forskellige former, farver og størrelser. Det understøtter også animationer og interaktivitet, som kan hjælpe med at gøre dine diagrammer mere engagerende.

For at bruge React-Vis skal du først oprette en grundlæggende React-app og installer biblioteket. Du kan gøre dette med følgende kommando:

npm installere reagere-vis

Når du har installeret biblioteket, kan du oprette et grundlæggende diagram med følgende kode:

importere Reager, { useState } fra'reagere';
importere {
 XYPlot,
 LineSeries,
 VerticalGridLines,
 Horisontale gitterlinjer,
 XAxis,
 YAxis
} fra'reagere overfor';


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


Vend tilbage (
<XYPlotbredde={300}højde={300}>
<VerticalGridLines />
<Horisontale gitterlinjer />
<XAxis />
<YAxis />
<LineSeriesdata={data} />
XYPlot>
 );
}
eksportStandard Diagram;

Ovenstående kode importerer React- og React-Vis-bibliotekerne. Den definerer derefter en funktion kaldet Chart, der returnerer et XYPlot med VerticalGridLines, HorizontalGridLines, XAxis, YAxis og en LineSeries. LineSeries tager dataarrayet, som indeholder x- og y-koordinaterne for de punkter, der udgør linjen.

Brug af React Google Charts Library

React Google Charts er et andet bibliotek, der gør det nemt at oprette diagrammer i React. Det giver et sæt komponenter til at skabe forskellige typer diagrammer, såsom søjlediagrammer, cirkeldiagrammer og linjediagrammer. Det understøtter også animationer og interaktivitet, som kan hjælpe med at gøre dine diagrammer mere engagerende.

For at bruge React Google Charts skal du først installere biblioteket. Du kan gøre dette med følgende kommando:

npm installere reager-google-charts

Når du har installeret biblioteket, kan du oprette et grundlæggende diagram med følgende kode:

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


Vend tilbage (
 bredde={'400px'}
 højde={'300px'}
 chartType="Bar"
 data={data}
 />
 );
}
eksportStandard MyChart;

Denne kode importerer react- og react-google-charts-bibliotekerne. Det opretter derefter en funktion kaldet MyChart, som returnerer en Chart-komponent. Diagramkomponenten tager dataarrayet, som indeholder etiketterne og værdierne for de punkter, der udgør diagrammet.

Ulemper ved at bruge CSS

Der er et par ulemper ved at bruge CSS til at oprette diagrammer i React:

  • Svært at bruge: Hvis du vil lave komplekse diagrammer, kan CSS være svært at bruge.
  • Ikke særlig fleksibel: CSS er ikke særlig fleksibel, så det kan være svært at lave ændringer i dine diagrammer.
  • Ikke interaktiv: CSS-diagrammer er ikke interaktive, så dine brugere vil ikke være i stand til at interagere med dem.

Hvis du vil oprette komplekse diagrammer, er React-vis og React-google-charts bedre valg. Men hvis du vil lave simple diagrammer, kan CSS være en god mulighed.

Fordele ved at bruge React-Vis

Der er flere fordele ved at bruge React-Vis til at oprette diagrammer i React:

  • Let at bruge: React-Vis er let at bruge, så du nemt kan oprette komplekse diagrammer.
  • Meget fleksibel: React-Vis er meget fleksibel, så du nemt kan foretage ændringer i dine diagrammer.
  • Interaktiv: React-Vis-diagrammer er interaktive, så dine brugere kan interagere med dem.
  • Animeret: React-Vis-diagrammer understøtter animationer, så du kan gøre dine diagrammer mere engagerende.

Hvis du ønsker at skabe komplekse diagrammer, der er interaktive og animerede, er React-Vis et godt valg.

Fordele ved at bruge React Google Charts

Ligesom React-Vis er der flere fordele ved at bruge React Google Charts til at oprette diagrammer i React:

  • Let at bruge: React Google Charts er let at bruge, så du nemt kan oprette komplekse diagrammer.
  • Forskellige diagramtyper: React Google Charts tilbyder forskellige diagramtyper, så du kan vælge den bedste til dine data.
  • Understøttelse af animation: React Google Charts understøtter animationer, så du kan gøre dine diagrammer mere engagerende.

Øg brugerengagementet med diagrammer

Diagrammer er en fantastisk måde at visualisere data på, men du kan også bruge dem til at øge brugerengagementet. Tilføjelse af animationer og interaktivitet til dine diagrammer kan gøre dem mere engagerende og kan hjælpe dine brugere med at forstå dine data bedre.

Så hvis du leder efter en måde at øge brugerengagementet i din React-app på, kan du overveje at tilføje diagrammer. Du kan også implementere din React-app til en hurtig, sikker og skalerbar platform som Github.