Diagram ger dina användare ett bekvämt och attraktivt sätt att visualisera data. De kan göra data lättare att förstå och kan göra din app mer interaktiv.
Det finns flera sätt att skapa diagram i React, inklusive att använda grundläggande CSS eller ett bibliotek som React-Vis eller React Google Charts.
Hur man skapar diagram i React With CSS
Att skapa diagram i React med grundläggande CSS är relativt enkelt. Allt du behöver göra är att skapa ett div-element med en bredd och höjd, ställ sedan in bakgrundsfärgen till önskad färg på diagrammet. Till exempel:
importera Reagera från'reagera';konst Diagram = () => {
lämna tillbaka (bredd: '100px', höjd: '300px', bakgrundsfärg: '#5D6AFF'}}/>
);
}
exporterastandard Diagram;
I ovanstående kod importerade vi React-biblioteket. Vi skapade sedan en funktion som heter Chart som returnerar en div med en bredd på 100px, en höjd på 300px och bakgrundsfärgen #5D6AFF. Detta kommer att skapa ett grundläggande diagram med en blå bakgrund. Du kan också
använd Material UI eller Tailwind CSS i din React-app att skapa diagram.Du kan också skapa flera diagram med text eller bilder inuti diverna för att skapa mer komplexa diagram.
importera Reagera från'reagera';konst Diagram = () => {
lämna tillbaka (
<div>bredd: '100px', höjd: '300px', bakgrundsfärg: '#5D6AFF'}}>
<sid>Diagram 1sid>
div>bredd: '100px', höjd: '300px', bakgrundsfärg: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"stil={{stoppning:'100 pixlar30 pixlar'}} />
div>
div>
);
}
exporterastandard Diagram;
React Charts med hjälp av React-Vis Library
React-Vis är ett bibliotek skapat av Uber som låter dig skapa diagram och grafer i React. Den tillhandahåller en uppsättning komponenter som gör det enkelt att skapa diagram med olika former, färger och storlekar. Den stöder också animationer och interaktivitet, vilket kan hjälpa till att göra dina diagram mer engagerande.
För att använda React-Vis måste du först skapa en grundläggande React-app och installera biblioteket. Du kan göra detta med följande kommando:
npm Installera reagera-visNär du har installerat biblioteket kan du skapa ett grundläggande diagram med följande kod:
importera Reagera, { useState } från'reagera';importera {
XYPlot,
LineSeries,
VerticalGridLines,
Horizontal GridLines,
XAxis,
YAxis
} från"reagera mot";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 }
]);lämna tillbaka (
<XYPlotbredd={300}höjd={300}>
<VerticalGridLines />
<Horizontal GridLines />
<XAxis />
<YAxis />
<LineSeriesdata={data} />
XYPlot>
);
}
exporterastandard Diagram;
Ovanstående kod importerar React- och React-Vis-biblioteken. Den definierar sedan en funktion som heter Chart som returnerar en XYPlot med VerticalGridLines, HorizontalGridLines, XAxis, YAxis och en LineSeries. LineSeries tar datamatrisen, som innehåller x- och y-koordinaterna för punkterna som utgör linjen.
Använda React Google Charts Library
React Google Charts är ett annat bibliotek som gör det enkelt att skapa diagram i React. Den tillhandahåller en uppsättning komponenter för att skapa olika typer av diagram, såsom stapeldiagram, cirkeldiagram och linjediagram. Den stöder också animationer och interaktivitet, vilket kan hjälpa till att göra dina diagram mer engagerande.
För att använda React Google Charts måste du först installera biblioteket. Du kan göra detta med följande kommando:
npm Installera reagera-google-diagramNär du har installerat biblioteket kan du skapa ett grundläggande diagram med följande kod:
importera Reagera, { useState } från'reagera';
importera { Diagram } från"reagera-google-diagram";konst MyChart = () => {
konst [data] = useState([
['År', 'Försäljning', "Utgifter"],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);lämna tillbaka (
bredd={'400px'}
höjd={'300px'}
chartType="Bar"
data={data}
/>
);
}
exporterastandard MyChart;
Den här koden importerar react- och react-google-charts-biblioteken. Den skapar sedan en funktion som heter MyChart som returnerar en diagramkomponent. Diagramkomponenten tar datamatrisen, som innehåller etiketter och värden för punkterna som utgör diagrammet.
Nackdelar med att använda CSS
Det finns några nackdelar med att använda CSS för att skapa diagram i React:
- Svår att använda: Om du vill skapa komplexa diagram kan CSS vara svårt att använda.
- Inte särskilt flexibel: CSS är inte särskilt flexibel, så det kan vara svårt att göra ändringar i dina diagram.
- Inte interaktiv: CSS-diagram är inte interaktiva, så dina användare kommer inte att kunna interagera med dem.
Om du vill skapa komplexa diagram är React-vis och React-google-charts bättre val. Men om du vill skapa enkla diagram kan CSS vara ett bra alternativ.
Fördelar med att använda React-Vis
Det finns flera fördelar med att använda React-Vis för att skapa diagram i React:
- Lätt att använda: React-Vis är lätt att använda, så du kan skapa komplexa diagram med lätthet.
- Mycket flexibel: React-Vis är mycket flexibelt, så du kan enkelt göra ändringar i dina diagram.
- Interaktiv: React-Vis-diagram är interaktiva, så dina användare kan interagera med dem.
- Animerad: React-Vis-diagram stöder animationer, så att du kan göra dina diagram mer engagerande.
Om du vill skapa komplexa diagram som är interaktiva och animerade är React-Vis ett bra val.
Fördelar med att använda React Google Charts
Precis som React-Vis finns det flera fördelar med att använda React Google Charts för att skapa diagram i React:
- Lätt att använda: React Google Charts är lätt att använda, så du kan skapa komplexa diagram med lätthet.
- Olika diagramtyper: React Google Charts tillhandahåller olika diagramtyper, så att du kan välja den bästa för din data.
- Stöd för animering: React Google Charts stöder animationer, så att du kan göra dina diagram mer engagerande.
Öka användarens engagemang med diagram
Diagram är ett utmärkt sätt att visualisera data, men du kan också använda dem för att öka användarnas engagemang. Genom att lägga till animationer och interaktivitet i dina diagram kan du göra dem mer engagerande och hjälpa dina användare att förstå din data bättre.
Så om du letar efter ett sätt att öka användarens engagemang i din React-app, överväg att lägga till diagram. Du kan också distribuera din React-app till en snabb, säker och skalbar plattform som Github.
