首頁 > web前端 > js教程 > Vite React 中的資料視覺化和下拉式選單變得簡單:Chart.js、React-Chartjs-和 React-Select

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.jsReact-Chartjs-2React-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;
登入後複製

結論

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


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

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板