ホームページ >ウェブフロントエンド >jsチュートリアル >Vite React でシンプルになったデータの視覚化とドロップダウン: Chart.js、React-Chartjs-、React-Select
ダッシュボードやデータ中心のアプリケーションを構築する場合、視覚化やドロップダウンなどのインタラクティブな要素が重要な役割を果たします。
このチュートリアルでは、Chart.js、React-Chartjs-2、および React-Select を Vite React プロジェクトに統合する手順を説明します。
まず、新しい Vite React プロジェクトを作成します。次のコマンドを実行します:
npm create vite@latest cov-dashboard -- --template react
プロジェクト フォルダーに移動します:
cd cov-dashboard
依存関係をインストールします:
npm install
これらのライブラリをプロジェクトに含めるには、次のコマンドを使用してインストールします。
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 サイトの他の関連記事を参照してください。