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

? 注: 一貫したパッケージ管理アプローチを希望する場合は、yarn ではなく 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;

---

結論

このシンプルな最小限のセットアップで、ビジュアライゼーション用の強力なツールとインタラクティブな UI コンポーネントを Vite React プロジェクトに追加する方法を学びました。

---

以上がVite React でシンプルになったデータの視覚化とドロップダウン: Chart.js、React-Chartjs-、React-Selectの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。