Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A diagramok kényelmes, vonzó módot kínálnak a felhasználók számára az adatok megjelenítésére. Könnyebben érthetővé tehetik az adatokat, és interaktívabbá tehetik az alkalmazást.

Számos módja van diagramok létrehozásának a React alkalmazásban, beleértve az alapvető CSS-t vagy egy olyan könyvtárat, mint a React-Vis vagy a React Google Charts.

Hogyan készítsünk diagramokat a React with CSS segítségével

A diagramok létrehozása a Reactban az alapvető CSS használatával viszonylag egyszerű. Csak annyit kell tennie, hogy létrehoz egy div elemet szélességgel és magassággal, majd állítsa be a háttérszínt a diagram kívánt színére. Például:

import Reagál tól től'reagál';
const Diagram = () => {
Visszatérés (


szélesség: "100px", magasság: "300px", háttérszín: '#5D6AFF'}}/>
 );
}
exportalapértelmezett Diagram;

A fenti kódban importáltuk a React könyvtárat. Ezután létrehoztunk egy Chart nevű függvényt, amely 100 képpont szélességű, 300 képpont magas és #5D6AFF háttérszínnel tér vissza. Ezzel létrehoz egy alapdiagramot kék háttérrel. Te is

instagram viewer
Material UI használata vagy Tailwind CSS a React alkalmazásban diagramok létrehozásához.

Több diagramot is létrehozhat szöveggel vagy képekkel a divben, így összetettebb diagramokat hozhat létre.

import Reagál tól től'reagál';
const Diagram = () => {
Visszatérés (
<div>


szélesség: "100px", magasság: "300px", háttérszín: '#5D6AFF'}}>
<p>1. diagramp>
div>
szélesség: "100px", magasság: "300px", háttérszín: „#FFCF00”}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"stílus={{párnázás:'100 képpont30 képpont'}} />
div>
div>
 );
}


exportalapértelmezett Diagram;

Reakciódiagramok a React-Vis könyvtár használatával

A React-Vis az Uber által létrehozott könyvtár, amely lehetővé teszi diagramok és grafikonok létrehozását a Reactban. Olyan összetevőket biztosít, amelyek megkönnyítik a különböző formájú, színű és méretű diagramok létrehozását. Támogatja az animációkat és az interaktivitást is, ami segíthet a diagramok vonzóbbá tételében.

A React-Vis használatához először meg kell tennie hozzon létre egy alap React alkalmazást és telepítse a könyvtárat. Ezt a következő paranccsal teheti meg:

npm telepítés reagál-vis

Miután telepítette a könyvtárat, létrehozhat egy alapdiagramot a következő kóddal:

import React, { useState } tól től'reagál';
import {
 XYPlot,
 LineSeries,
 VerticalGridLines,
 HorizontalGridLines,
 XAxis,
 YAxis
} tól től'react-vis';


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


Visszatérés (
<XYPlotszélesség={300}magasság={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeriesadat={adat} />
XYPlot>
 );
}
exportalapértelmezett Diagram;

A fenti kód importálja a React és React-Vis könyvtárakat. Ezután meghatározza a Chart nevű függvényt, amely egy XYPlotot ad vissza VerticalGridLines, HorizontalGridLines, XAxis, YAxis és LineSeries segítségével. A LineSeries veszi az adattömböt, amely a vonalat alkotó pontok x és y koordinátáit tartalmazza.

A React Google Charts Library használata

A React A Google Charts egy másik könyvtár, amely megkönnyíti a diagramok létrehozását a React alkalmazásban. Összetevőket biztosít különböző típusú diagramok, például oszlopdiagramok, kördiagramok és vonaldiagramok létrehozásához. Támogatja az animációkat és az interaktivitást is, ami segíthet a diagramok vonzóbbá tételében.

A React Google Charts használatához először telepítenie kell a könyvtárat. Ezt a következő paranccsal teheti meg:

npm telepítés react-google-charts

Miután telepítette a könyvtárat, létrehozhat egy alapdiagramot a következő kóddal:

import React, { useState } tól től'reagál';
import { Diagram } tól től"react-google-charts";
const MyChart = () => {
const [data] = useState([
['Év', "értékesítés", 'Költségek'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


Visszatérés (
 szélesség={'400px'}
 magasság={"300px"}
 chartType="Rúd"
 adat={adat}
 />
 );
}
exportalapértelmezett MyChart;

Ez a kód importálja a react és a react-google-charts könyvtárakat. Ezután létrehoz egy MyChart nevű függvényt, amely egy Chart komponenst ad vissza. A Chart komponens veszi az adattömböt, amely tartalmazza a diagramot alkotó pontok címkéit és értékeit.

A CSS használatának hátrányai

Van néhány hátránya a CSS használatának diagramok létrehozásához a React programban:

  • Nehezen használható: Ha összetett diagramokat szeretne létrehozni, a CSS használata nehézkes lehet.
  • Nem túl rugalmas: A CSS nem túl rugalmas, így nehéz lehet változtatni a diagramokon.
  • Nem interaktív: A CSS-diagramok nem interaktívak, így a felhasználók nem fognak tudni kommunikálni velük.

Ha összetett diagramokat szeretne létrehozni, a React-vis és React-google-charts jobb választás. Ha azonban egyszerű diagramokat szeretne létrehozni, a CSS jó választás lehet.

A React-Vis használatának előnyei

A React-Vis használatának számos előnye van diagramok létrehozásához a React alkalmazásban:

  • Könnyen kezelhető: A React-Vis könnyen használható, így könnyedén hozhat létre összetett diagramokat.
  • Rendkívül rugalmas: A React-Vis rendkívül rugalmas, így könnyedén módosíthatja a diagramokat.
  • Interaktív: A React-Vis diagramok interaktívak, így a felhasználók interakcióba léphetnek velük.
  • Élénk: A React-Vis diagramok támogatják az animációkat, így vonzóbbá teheti diagramjait.

Ha összetett, interaktív és animált diagramokat szeretne létrehozni, a React-Vis jó választás.

A React Google Charts használatának előnyei

Csakúgy, mint a React-Vis, számos előnnyel jár a React Google Charts diagramok létrehozása a React alkalmazásban:

  • Könnyen kezelhető: A React Google Charts könnyen használható, így könnyedén hozhat létre összetett diagramokat.
  • Különböző típusú diagramok: React A Google Charts különböző diagramtípusokat kínál, így kiválaszthatja a legjobbat adataihoz.
  • Animáció támogatása: React A Google Charts támogatja az animációkat, így Ön még vonzóbbá teheti diagramjait.

Növelje a felhasználók elköteleződését a diagramokkal

A diagramok nagyszerű lehetőséget kínálnak az adatok megjelenítésére, de felhasználhatja őket a felhasználói elköteleződés növelésére is. Animációk és interaktivitás hozzáadása a diagramokhoz vonzóbbá teheti azokat, és segíthet a felhasználóknak jobban megérteni az adatait.

Tehát, ha módot keres a felhasználói elköteleződés növelésére a React alkalmazásban, fontolja meg diagramok hozzáadását. A React alkalmazást gyors, biztonságos és méretezhető platformon is üzembe helyezheti, mint például a Github.