Diagramme bieten Ihren Benutzern eine bequeme und attraktive Möglichkeit, Daten zu visualisieren. Sie können Daten leichter verständlich machen und Ihre App interaktiver machen.
Es gibt mehrere Möglichkeiten, Diagramme in React zu erstellen, einschließlich der Verwendung von einfachem CSS oder einer Bibliothek wie React-Vis oder React Google Charts.
So erstellen Sie Diagramme in React With CSS
Das Erstellen von Diagrammen in React mit einfachem CSS ist relativ einfach. Sie müssen lediglich ein div-Element mit einer Breite und Höhe erstellen und dann die Hintergrundfarbe auf die gewünschte Farbe des Diagramms einstellen. Zum Beispiel:
importieren Reagieren aus'reagieren';konst Diagramm = () => {
zurückkehren (Breite: '100px', Höhe: '300px', Hintergrundfarbe: '#5D6AFF'}}/>
);
}
ExportStandard Diagramm;
Im obigen Code haben wir die React-Bibliothek importiert. Dann haben wir eine Funktion namens Chart erstellt, die ein div mit einer Breite von 100 Pixel, einer Höhe von 300 Pixel und einer Hintergrundfarbe von #5D6AFF zurückgibt. Dadurch wird ein einfaches Diagramm mit blauem Hintergrund erstellt. Du kannst auch
Verwenden Sie die Material-UI oder Tailwind CSS in Ihrer React-App Diagramme zu erstellen.Sie können auch mehrere Diagramme mit Text oder Bildern innerhalb der Divs erstellen, um komplexere Diagramme zu erstellen.
importieren Reagieren aus'reagieren';konst Diagramm = () => {
zurückkehren (
<div>Breite: '100px', Höhe: '300px', Hintergrundfarbe: '#5D6AFF'}}>
<P>Diagramm 1P>
div>Breite: '100px', Höhe: '300px', Hintergrundfarbe: '#FFCF00'}}>
<BildQuelle=" https://dummyimage.com/40x80/000/0011ff"Stil={{Polsterung:'100px30px'}} />
div>
div>
);
}
ExportStandard Diagramm;
Reaktionsdiagramme mit der React-Vis-Bibliothek
React-Vis ist eine von Uber erstellte Bibliothek, mit der Sie Diagramme und Grafiken in React erstellen können. Es bietet eine Reihe von Komponenten, die das Erstellen von Diagrammen mit verschiedenen Formen, Farben und Größen erleichtern. Es unterstützt auch Animationen und Interaktivität, die dazu beitragen können, Ihre Diagramme ansprechender zu gestalten.
Um React-Vis zu verwenden, müssen Sie zuerst Erstellen Sie eine einfache React-App und die Bibliothek installieren. Sie können dies mit dem folgenden Befehl tun:
npm Installieren reagieren-visNachdem Sie die Bibliothek installiert haben, können Sie mit dem folgenden Code ein einfaches Diagramm erstellen:
importieren Reagieren, { useState } aus'reagieren';importieren {
XYPlot,
Linienserie,
VertikaleGitterlinien,
Horizontale Gitterlinien,
XAchse,
YAchse
} aus'reagieren-vis';konst Diagramm = () => {
konst [Daten] = useState([
{ X: 0, ja: 8 },
{ X: 1, ja: 5 },
{ X: 2, ja: 4 },
{ X: 3, ja: 9 },
{ X: 4, ja: 1 },
{ X: 5, ja: 7 },
{ X: 6, ja: 6 },
{ X: 7, ja: 3 },
{ X: 8, ja: 2 },
{ X: 9, ja: 0 }
]);zurückkehren (
<XYPlotBreite={300}Höhe={300}>
<VertikaleGitterlinien />
<Horizontale Gitterlinien />
<XAchse />
<YAchse />
<LinienserieDaten={Daten} />
XYPlot>
);
}
ExportStandard Diagramm;
Der obige Code importiert die React- und React-Vis-Bibliotheken. Anschließend definiert es eine Funktion namens Chart, die ein XY-Diagramm mit VerticalGridLines, HorizontalGridLines, XAxis, YAxis und einer LineSeries zurückgibt. Die LineSeries übernimmt das Datenarray, das die x- und y-Koordinaten der Punkte enthält, aus denen die Linie besteht.
Verwenden der React Google Charts-Bibliothek
React Google Charts ist eine weitere Bibliothek, die das Erstellen von Diagrammen in React vereinfacht. Es bietet eine Reihe von Komponenten zum Erstellen verschiedener Arten von Diagrammen, z. B. Balkendiagramme, Kreisdiagramme und Liniendiagramme. Es unterstützt auch Animationen und Interaktivität, die dazu beitragen können, Ihre Diagramme ansprechender zu gestalten.
Um React Google Charts verwenden zu können, müssen Sie zunächst die Bibliothek installieren. Sie können dies mit dem folgenden Befehl tun:
npm Installieren reagieren-google-chartsNachdem Sie die Bibliothek installiert haben, können Sie mit dem folgenden Code ein einfaches Diagramm erstellen:
importieren Reagieren, { useState } aus'reagieren';
importieren { Diagramm } aus'reagieren-google-charts';konst MeinChart = () => {
konst [Daten] = useState([
['Jahr', 'Verkauf', 'Kosten'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);zurückkehren (
Breite = {'400px'}
Höhe={'300px'}
chartType="Bar"
Daten={Daten}
/>
);
}
ExportStandard MyChart;
Dieser Code importiert die Bibliotheken „react“ und „react-google-charts“. Anschließend erstellt es eine Funktion namens MyChart, die eine Diagrammkomponente zurückgibt. Die Diagrammkomponente verwendet das Datenarray, das die Beschriftungen und Werte der Punkte enthält, aus denen das Diagramm besteht.
Nachteile der Verwendung von CSS
Die Verwendung von CSS zum Erstellen von Diagrammen in React hat einige Nachteile:
- Schwer zu bedienen: Wenn Sie komplexe Diagramme erstellen möchten, kann CSS schwierig zu verwenden sein.
- Nicht sehr flexibel: CSS ist nicht sehr flexibel, daher kann es schwierig sein, Änderungen an Ihren Diagrammen vorzunehmen.
- Nicht interaktiv: CSS-Diagramme sind nicht interaktiv, sodass Ihre Benutzer nicht mit ihnen interagieren können.
Wenn Sie komplexe Diagramme erstellen möchten, sind React-vis und React-google-charts die bessere Wahl. Wenn Sie jedoch einfache Diagramme erstellen möchten, ist CSS möglicherweise eine gute Option.
Vorteile der Verwendung von React-Vis
Die Verwendung von React-Vis zum Erstellen von Diagrammen in React bietet mehrere Vorteile:
- Einfach zu verwenden: React-Vis ist einfach zu bedienen, sodass Sie mühelos komplexe Diagramme erstellen können.
- Hochflexibel: React-Vis ist sehr flexibel, sodass Sie problemlos Änderungen an Ihren Diagrammen vornehmen können.
- Interaktiv: React-Vis-Diagramme sind interaktiv, sodass Ihre Benutzer mit ihnen interagieren können.
- Animiert: React-Vis-Diagramme unterstützen Animationen, sodass Sie Ihre Diagramme ansprechender gestalten können.
Wenn Sie komplexe Diagramme erstellen möchten, die interaktiv und animiert sind, ist React-Vis eine gute Wahl.
Vorteile der Verwendung von React Google Charts
Genau wie React-Vis bietet die Verwendung von React Google Charts mehrere Vorteile, um Diagramme in React zu erstellen:
- Einfach zu verwenden: React Google Charts ist einfach zu bedienen, sodass Sie mühelos komplexe Diagramme erstellen können.
- Verschiedene Diagrammtypen: React Google Charts bietet verschiedene Diagrammtypen, sodass Sie den besten für Ihre Daten auswählen können.
- Unterstützung für Animationen: React Google Charts unterstützt Animationen, sodass Sie Ihre Diagramme ansprechender gestalten können.
Erhöhen Sie das Benutzerengagement mit Diagrammen
Diagramme sind eine großartige Möglichkeit, Daten zu visualisieren, aber Sie können sie auch verwenden, um die Benutzerinteraktion zu steigern. Das Hinzufügen von Animationen und Interaktivität zu Ihren Diagrammen kann sie ansprechender machen und Ihren Benutzern helfen, Ihre Daten besser zu verstehen.
Wenn Sie also nach einer Möglichkeit suchen, die Benutzerinteraktion in Ihrer React-App zu erhöhen, sollten Sie das Hinzufügen von Diagrammen in Betracht ziehen. Sie können Ihre React-App auch auf einer schnellen, sicheren und skalierbaren Plattform wie Github bereitstellen.
