Visualisation des données et listes déroulantes simplifiées dans Vite React : Chart.js, React-Chartjs-et React-Select

Présentation

Lors de la création de tableaux de bord ou d'applications centrées sur les données, les visualisations et les éléments interactifs tels que les listes déroulantes jouent un rôle important.
Donc, dans ce tutoriel, je vais vous guider dans l'intégration de Chart.js, React-Chartjs-2 et React-Select dans un projet Vite React.

---

Configurer votre projet Vite React

Commencez par créer un nouveau projet Vite React. Exécutez la commande suivante :

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

Naviguez dans le dossier du projet :

cd cov-dashboard

Installer les dépendances :

npm install

---

Installation de Chart.js, React-Chartjs-2 et React-Select

Pour inclure ces bibliothèques dans votre projet, installez-les avec :

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

? Remarque : Assurez-vous d'utiliser npm au lieu de fil si vous préférez une approche cohérente de gestion des paquets.

---

Créer un graphique à barres simple

Voici comment créer un graphique à barres à l'aide de React-chartjs-2 :

Composant : 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;

---

Ajout d'une liste déroulante dynamique

Ajoutons un menu déroulant avec React-Select :

Composant : 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;

---

Intégration des composants

Importez et utilisez les composants dans votre App.jsx principal :

Application principale :

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

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

export default App;

---

Conclusion

Avec cette configuration minimale simple, vous avez appris à ajouter avec succès des outils puissants pour les visualisations et les composants d'interface utilisateur interactifs dans votre projet Vite React.

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!