在建立儀表板或以資料為中心的應用程式時，視覺化和下拉清單等互動元素發揮著重要作用。
因此，在本教程中，我將引導您將 Chart.js、React-Chartjs-2 和 React-Select 整合到 Vite React 專案中。
先建立一個新的 Vite React 專案。執行以下命令：
npm create vite@latest cov-dashboard -- --template react
導航到專案資料夾：
cd cov-dashboard
安裝依賴項：
npm install
要將這些庫包含在您的專案中，請使用以下命令安裝它們：
npm install chart.js react-chartjs-2 react-select
？ 注意：如果您喜歡一致的套件管理方法，請確保使用 npm 而不是 YARN。
以下是如何使用react-chartjs-2建立長條圖：
元件：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;
讓我們新增一個帶有react-select的下拉式選單：
元件：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;
匯入並使用主 App.jsx 中的元件：
主應用程式：
import React from 'react';
import BarChart from './BarChart';
import Dropdown from './Dropdown';
const App = () => (
<div>
<h1>Dashboard</h1>
<BarChart />
<Dropdown />
</div>
);
export default App;
透過這個簡單的最小設置，您已經學會如何在 Vite React 專案中成功添加強大的視覺化工具和互動式 UI 元件。
以上是Vite React 中的資料視覺化和下拉式選單變得簡單：Chart.js、React-Chartjs-和 React-Select的詳細內容。更多資訊請關注PHP中文網其他相關文章！
