Vite React 中的資料視覺化和下拉式選單變得簡單：Chart.js、React-Chartjs-和 React-Select

簡介

在建立儀表板或以資料為中心的應用程式時，視覺化和下拉清單等互動元素發揮著重要作用。
因此，在本教程中，我將引導您將 Chart.js、React-Chartjs-2 和 React-Select 整合到 Vite React 專案中。

---

設定您的 Vite React 項目

先建立一個新的 Vite React 專案。執行以下命令：

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

導航到專案資料夾：

cd cov-dashboard

安裝依賴項：

npm install

---

安裝 Chart.js、React-Chartjs-2 和 React-Select

要將這些庫包含在您的專案中，請使用以下命令安裝它們：

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}"></bar>;

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}"></select>;

export default Dropdown;

---

整合元件

匯入並使用主 App.jsx 中的元件：

主應用程式：

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

const App = () => (
  <div>
    <h1 id="Dashboard">Dashboard</h1>
    <barchart></barchart>
    <dropdown></dropdown>
  </div>
);

export default App;

---

結論

透過這個簡單的最小設置，您已經學會如何在 Vite React 專案中成功添加強大的視覺化工具和互動式 UI 元件。

---

以上是Vite React 中的資料視覺化和下拉式選單變得簡單：Chart.js、React-Chartjs-和 React-Select的詳細內容。更多資訊請關注PHP中文網其他相關文章！