Vite React 中的数据可视化和下拉菜单变得简单：Chart.js、React-Chartjs-和 React-Select-js教程-PHP中文网

Vite React 中的数据可视化和下拉菜单变得简单：Chart.js、React-Chartjs-和 React-Select

Patricia Arquette

发布： 2024-12-15 14:23:17

原创

780 人浏览过

Data Visualization and Dropdowns made simple in Vite React: Chart.js, React-Chartjs-and 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} />;

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;

登录后复制