要使用 React 繪制一個結合線狀圖和柱狀圖的圖表，你可以使用 react-chartjs-2 庫，它是基于 Chart.js 的 React 封裝。以下是一個示例代碼，展示如何實現這個需求：
1. 安裝依賴
首先，你需要安裝 react-chartjs-2 和 chart.js：
npm install react-chartjs-2 chart.js
2. 創建圖表組件
接下來，創建一個 React 組件來繪制圖表：
import React from 'react';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend } from 'chart.js';
import { Bar, Line } from 'react-chartjs-2';ChartJS.register(CategoryScale,LinearScale,BarElement,LineElement,PointElement,Title,Tooltip,Legend
);const CombinedChart = () => {const data = {labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],datasets: [{type: 'bar',label: '銷售目標量',data: [120, 150, 180, 200, 220, 250, 280, 300, 320, 350, 380, 400],backgroundColor: 'rgba(54, 162, 235, 0.6)',borderColor: 'rgba(54, 162, 235, 1)',borderWidth: 1,yAxisID: 'y1',borderRadius: 4, // 為柱狀圖添加圓角},{type: 'bar',label: '銷售完成量',data: [100, 140, 170, 190, 210, 240, 270, 290, 310, 340, 370, 390],backgroundColor: 'rgba(75, 192, 192, 0.6)',borderColor: 'rgba(75, 192, 192, 1)',borderWidth: 1,yAxisID: 'y1',borderRadius: 4, // 為柱狀圖添加圓角},{type: 'line',label: '完成率',data: [83, 93, 94, 95, 95, 96, 96, 97, 97, 97, 97, 97.5],borderColor: 'rgba(255, 99, 132, 1)',backgroundColor: 'rgba(255, 99, 132, 0.2)',yAxisID: 'y2',tension: 0.4, // 調整曲線的光滑度pointStyle: 'circle', // 設置數據點的樣式pointRadius: 6, // 設置數據點的半徑pointHoverRadius: 8, // 設置鼠標懸停時數據點的半徑},],};const options = {responsive: true,plugins: {legend: {position: 'top',display: true,labels: {color: '#333', // 設置圖例文字顏色},},tooltip: {mode: 'index',intersect: false,backgroundColor: '#fff', // 設置提示框的背景顏色titleColor: '#000', // 設置提示框標題顏色bodyColor: '#000', // 設置提示框主體內容顏色borderColor: '#ccc', // 設置提示框邊框顏色borderWidth: 1, // 設置提示框邊框寬度caretSize: 5, // 設置提示框箭頭大小caretPadding: 10, // 設置提示框箭頭與內容的間距},},scales: {x: {ticks: {color: '#555', // 設置X軸刻度文字顏色},grid: {color: '#e5e5e5', // 設置X軸網格顏色},},y1: {type: 'linear',display: true,position: 'left',title: {display: true,text: '銷售數量',color: '#333', // 設置Y軸標題顏色},ticks: {color: '#555', // 設置Y軸刻度文字顏色},grid: {color: '#e5e5e5', // 設置Y軸網格顏色},},y2: {type: 'linear',display: true,position: 'right',title: {display: true,text: '完成率 (%)',color: '#333', // 設置Y軸標題顏色},ticks: {color: '#555', // 設置Y軸刻度文字顏色},grid: {drawOnChartArea: false,color: '#e5e5e5', // 設置Y軸網格顏色},},},};return (<div style={{ position: 'relative', height: '300px' }}><Bar data={data} options={options} /></div>);
};export default CombinedChart;3. 使用組件
在你的應用中，你可以像這樣使用 CombinedChart 組件：
import React from 'react';
import ReactDOM from 'react-dom';
import CombinedChart from './CombinedChart';function App() {return (<div className="App"><h1>銷售數據圖表</h1><CombinedChart /></div>);
}ReactDOM.render(<App />, document.getElementById('root'));
4. 運行應用
確保你的開發服務器正在運行，然后你應該能夠看到一個結合了柱狀圖和線狀圖的圖表，左邊是銷售數量，右邊是完成率，下面是月份。
解釋
data.labels: X 軸的標簽，表示月份。datasets: 包含三個數據集，兩個柱狀圖數據集（銷售目標量和銷售完成量）和一個線狀圖數據集（完成率）。yAxisID: 用于指定數據集使用哪個 Y 軸。y1是左邊的銷售數量軸，y2是右邊的完成率軸。options.scales: 配置了兩個 Y 軸，分別用于銷售數量和完成率。
效果圖
)
