React实现自定义图表（线状+柱状）

要使用 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 轴，分别用于销售数量和完成率。

效果图