如何在react-chartjs-2中实现图表的总数量额外标签？

要在react-chartjs-2中实现图中标记5的总数量标签效果，有两种常用方案：

方案一：通过Chart.js自定义插件绘制标签 #

这种方式直接在图表画布上绘制文本，和图表融为一体：

1. 定义自定义插件，计算并绘制总数量：

const TotalLabelPlugin = {
  id: 'totalLabel',
  beforeDraw: (chart) => {
    // 计算当前图表数据的总和
    const total = chart.data.datasets[0].data.reduce((acc, val) => acc + val, 0);
    const ctx = chart.ctx;
    ctx.save();
    // 设置文本样式
    ctx.font = 'bold 16px Arial';
    ctx.fillStyle = '#333';
    // 定位文本到图表顶部居中位置
    const textX = chart.chartArea.left + (chart.chartArea.width / 2);
    const textY = chart.chartArea.top - 20;
    ctx.textAlign = 'center';
    ctx.fillText(`总数量：${total}`, textX, textY);
    ctx.restore();
  }
};

2. 在React组件中注册插件并使用图表：

import { Pie } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

// 注册必要组件和自定义插件
ChartJS.register(ArcElement, Tooltip, Legend, TotalLabelPlugin);

const MyChart = ({ data }) => {
  return <Pie data={data} />;
};

方案二：React组件层面布局显示标签 #

这种方式更灵活，适合需要自定义样式或响应式布局的场景：

import { Pie } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

ChartJS.register(ArcElement, Tooltip, Legend);

const MyChartWithTotal = ({ data }) => {
  // 计算当前图表数据总和
  const total = data.datasets[0].data.reduce((acc, val) => acc + val, 0);
  
  return (
    <div style={{ position: 'relative', textAlign: 'center', marginBottom: '20px' }}>
      {/* 总数量标签 */}
      <h3 style={{ margin: '0 0 10px 0', color: '#333' }}>总数量：{total}</h3>
      {/* 图表组件 */}
      <Pie data={data} />
    </div>
  );
};

注意事项 #

• 多个图表独立使用时，每个图表传入对应数据集即可自动计算各自的总数量
• 插件方案中的文本位置可通过调整textX和textY参数修改，比如放在图表内部、右下角等位置
• 两种方案的文本样式都可根据需求自定义，比如字体大小、颜色、粗细等

内容的提问来源于stack exchange，提问作者Cience