Hur man lägger till diagram i din React-app

Hur man lägger till diagram i din React-app
Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

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:





MAKEUSE AV DAGENS VIDEO 
 import React from 'react'; 
 
const Chart = () => { 
 return ( 
  <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}/> 
 ); 
} 
 
export default Chart;

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 för att skapa diagram.

Du kan också skapa flera diagram med text eller bilder inuti diverna för att skapa mer komplexa diagram.



 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;
Reager app med diagram med css

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 install react-vis

När du har installerat biblioteket kan du skapa ett grundläggande diagram med följande kod:

 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;

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.



react app med diagram med react-dvs

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:

kan du ansluta trådlösa hörlurar till xbox one 
 npm install react-google-charts

När du har installerat biblioteket kan du skapa ett grundläggande diagram med följande kod:

 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;

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.

react app med diagram med hjälp av google-react-charts

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ändarengagemanget 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.