React ChartJS 4.2.1+PrimeReact：如何给堆叠条形图右侧加数量文本？

PrimeReact的Chart组件基于Chart.js封装，我们可以通过自定义Chart.js插件来实现条形图右侧固定显示数值的需求，以下是具体实现步骤：

1. 编写自定义Chart.js插件 #

该插件会在图表绘制完成后，遍历每个堆叠条形元素，在其右侧绘制对应数值：

const barValueLabelPlugin = {
  id: 'barValueLabel',
  afterDraw: (chart) => {
    const { ctx, data } = chart;
    ctx.save();
    // 自定义文本样式，可根据设计需求调整
    ctx.font = '14px "Helvetica Neue", Helvetica, Arial, sans-serif';
    ctx.fillStyle = '#2d3748';
    
    data.datasets.forEach((dataset, datasetIdx) => {
      dataset.data.forEach((value, dataIdx) => {
        if (value <= 0) return; // 跳过数值为0的情况
        // 获取当前条形的位置与尺寸信息
        const barElement = chart.getDatasetMeta(datasetIdx).data[dataIdx];
        // 计算文本绘制位置：条形右侧偏移5px，垂直居中
        const xPosition = barElement.x + barElement.width + 5;
        const yPosition = barElement.y + barElement.height / 2;
        
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText(value.toString(), xPosition, yPosition);
      });
    });
    ctx.restore();
  }
};

2. 在PrimeReact Chart组件中应用插件 #

将插件传入Chart组件的plugins属性，同时调整图表配置给右侧文本预留显示空间：

import { Chart } from 'primereact/chart';

const StackedBarDemo = () => {
  // 堆叠条形图数据示例
  const chartData = {
    labels: ['产品A', '产品B', '产品C'],
    datasets: [
      {
        label: '已售',
        backgroundColor: '#3b82f6',
        data: [45, 62, 38]
      },
      {
        label: '库存',
        backgroundColor: '#10b981',
        data: [28, 15, 42]
      }
    ]
  };

  const chartOptions = {
    // 如果是横向堆叠条形图，启用此项；纵向堆叠可删除该配置
    indexAxis: 'y',
    scales: {
      x: {
        stacked: true,
        // 给右侧文本预留足够空间，避免被截断
        padding: { right: 40 }
      },
      y: {
        stacked: true
      }
    },
    plugins: {
      legend: {
        position: 'top'
      }
    }
  };

  return (
    <Chart
      type="bar"
      data={chartData}
      options={chartOptions}
      plugins={[barValueLabelPlugin]}
    />
  );
};

export default StackedBarDemo;

关键调整说明 #

• 若使用纵向堆叠条形图，删除indexAxis: 'y'配置即可，坐标计算逻辑无需修改。
• 可根据设计需求调整font、fillStyle、文本偏移量（+5）、右侧padding值等参数。
• 若需要显示堆叠后的总值，可在遍历数据集时累加对应索引的数值，再在整个堆叠条的右侧绘制累加结果。

内容的提问来源于stack exchange，提问作者Johnny Blasius Seubert