Visualisasi Data dan Dropdown dibuat mudah dalam Vite React: Chart.js, React-Chartjs-dan React-Select

Pengenalan

Apabila membina papan pemuka atau aplikasi tertumpu data, visualisasi dan elemen interaktif seperti dropdown memainkan peranan penting.
Jadi Dalam tutorial ini, saya akan membimbing anda menyepadukan Chart.js, React-Chartjs-2 dan React-Select ke dalam projek Vite React.

---

Menyediakan Projek Vite React Anda

Mulakan dengan mencipta projek Vite React baharu. Jalankan arahan berikut:

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

Navigasi ke dalam folder projek:

cd cov-dashboard

Pasang kebergantungan:

npm install

---

Memasang Chart.js, React-Chartjs-2 dan React-Select

Untuk memasukkan perpustakaan ini dalam projek anda, pasangkannya dengan:

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

? Nota: Pastikan anda menggunakan npm dan bukannya benang jika anda lebih suka pendekatan pengurusan pakej yang konsisten.

---

Membuat Carta Bar Mudah

Begini cara anda boleh membuat Carta Bar menggunakan react-chartjs-2:

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

---

Menambah Dropdown Dinamik

Mari tambahkan menu lungsur dengan react-select:

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

---

Menyepadukan Komponen

Import dan gunakan komponen dalam App.jsx utama anda:

Apl Utama:

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

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

export default App;

---

Kesimpulan

Dengan persediaan minimum yang mudah ini, anda telah mempelajari cara berjaya menambahkan alatan berkuasa untuk visualisasi dan komponen UI interaktif dalam projek Vite React anda.

---

Atas ialah kandungan terperinci Visualisasi Data dan Dropdown dibuat mudah dalam Vite React: Chart.js, React-Chartjs-dan React-Select. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!