Vite React에서 간단해진 데이터 시각화 및 드롭다운: Chart.js, React-Chartjs-및 React-Select-JS 튜토리얼-php.cn

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을 사용해야 합니다.

간단한 막대 차트 만들기

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;

로그인 후 복사