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中文网其他相关文章！