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!