Datenvisualisierung und Dropdowns leicht gemacht in Vite React: Chart.js, React-Chartjs-und React-Select

Einführung

Beim Erstellen von Dashboards oder datenzentrierten Anwendungen spielen Visualisierungen und interaktive Elemente wie Dropdowns eine wichtige Rolle.
In diesem Tutorial werde ich Sie durch die Integration von Chart.js, React-Chartjs-2 und React-Select in ein Vite React-Projekt führen.

Einrichten Ihres Vite React-Projekts

Erstellen Sie zunächst ein neues Vite React-Projekt. Führen Sie den folgenden Befehl aus:

npm create vite@latest cov-dashboard -- --template react

Navigieren Sie in den Projektordner:

cd cov-dashboard

Abhängigkeiten installieren:

npm install

Installieren von Chart.js, React-Chartjs-2 und React-Select

Um diese Bibliotheken in Ihr Projekt einzubinden, installieren Sie sie mit:

npm install chart.js react-chartjs-2 react-select

? Hinweis: Stellen Sie sicher, dass Sie npm anstelle von Garn verwenden, wenn Sie einen konsistenten Paketverwaltungsansatz bevorzugen.

Ein einfaches Balkendiagramm erstellen

So können Sie mit „react-chartjs-2“ ein Balkendiagramm erstellen:

Komponente: BarChart.jsx

import React from 'react';
import { Bar } from 'react-chartjs-2';
import Chart from 'chart.js/auto';

const data = {
  labels: ['Jan', 'Feb', 'Mar'],
  datasets: [
    {
      label: 'Sales',
      data: [30, 50, 70],
      backgroundColor: ['rgba(75, 192, 192, 0.6)'],
    },
  ],
};

const BarChart = () => <Bar data={data} />;

export default BarChart;

Hinzufügen eines dynamischen Dropdown-Menüs

Fügen wir ein Dropdown-Menü mit React-Select hinzu:

Komponente: Dropdown.jsx

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'vanilla', label: 'Vanilla' },
  { value: 'strawberry', label: 'Strawberry' },
];

const Dropdown = () => <Select options={options} />;

export default Dropdown;

Integration der Komponenten

Importieren und verwenden Sie die Komponenten in Ihrer Haupt-App.jsx:

Haupt-App:

import React from 'react';
import BarChart from './BarChart';
import Dropdown from './Dropdown';

const App = () => (
  <div>
    <h1>Dashboard</h1>
    <BarChart />
    <Dropdown />
  </div>
);

export default App;

Fazit

Mit dieser einfachen, minimalen Einrichtung haben Sie gelernt, wie Sie Ihrem Vite React-Projekt erfolgreich leistungsstarke Tools für Visualisierungen und interaktive UI-Komponenten hinzufügen.

Das obige ist der detaillierte Inhalt vonDatenvisualisierung und Dropdowns leicht gemacht in Vite React: Chart.js, React-Chartjs-und React-Select. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!