如何在PrimeReact的Chart.js柱状图上添加图标与文本注释？

针对堆叠柱状图顶部添加图标和文本的需求，直接用annotation插件可能因为堆叠高度的计算问题无法适配，这里提供两种可行方案：

方案一：使用Chart.js自定义插件（推荐，更灵活） #

通过自定义插件直接在Canvas上绘制文本和图标，能精准控制位置，适配堆叠场景：

1. 实现堆叠高度计算函数 #

用来获取每个x轴位置的柱子总高度：

const calculateStackedTotals = (datasets) => {
  const totals = [];
  datasets.forEach(dataset => {
    dataset.data.forEach((value, index) => {
      totals[index] = (totals[index] || 0) + value;
    });
  });
  return totals;
};

2. 修改图表配置，添加自定义插件 #

在options.plugins里新增custom插件，在渲染阶段绘制内容：

const options = {
  maintainAspectRatio: false,
  aspectRatio: 0.8,
  plugins: {
    legend: {
      labels: { fontColor: textColor },
      display: false
    },
    // 自定义标注插件
    custom: {
      render: (chart) => {
        const ctx = chart.ctx;
        const totals = calculateStackedTotals(pureCostDatasets);
        const xScale = chart.scales.x;
        const yScale = chart.scales.y;

        // 遍历每个x轴位置，按需添加标注
        totals.forEach((total, index) => {
          // 示例：只给第一个柱子添加标注，可根据需求调整条件
          if (index !== 0) return;

          // 获取柱子顶部的坐标
          const xPos = xScale.getPixelForValue(index);
          const yPos = yScale.getPixelForValue(total);

          // 绘制文本
          ctx.fillStyle = '#333';
          ctx.font = '14px Arial';
          ctx.textAlign = 'center';
          ctx.fillText(`总费用: ${total}`, xPos, yPos - 10); // 上移10px避免贴柱子

          // 绘制图标（示例：用Canvas绘制圆形图标，也可加载外部图片）
          ctx.beginPath();
          ctx.arc(xPos, yPos - 30, 8, 0, Math.PI * 2);
          ctx.fillStyle = PURE_DATA_COLORS.ORANGE;
          ctx.fill();
          ctx.strokeStyle = '#fff';
          ctx.lineWidth = 2;
          ctx.stroke();
        });
      }
    }
  },
  scales: {
    x: {
      stacked: true,
      ticks: { color: textColorSecondary, font: { weight: 500 } },
      grid: { display: false, drawBorder: false }
    },
    y: {
      stacked: true,
      ticks: { color: textColorSecondary },
      grid: { display: false, drawBorder: false }
    }
  }
};

方案二：适配chartjs-plugin-annotation插件 #

如果坚持使用annotation插件，需要手动计算每个标注的y轴位置（即对应x的堆叠总高度）：

// 先计算堆叠总高度
const stackedTotals = calculateStackedTotals(pureCostDatasets);

const options = {
  // ...其他原有配置
  plugins: {
    // ...其他插件
    annotation: {
      annotations: {
        // 文本标注
        totalLabel: {
          type: 'label',
          xValue: 0, // 目标x轴索引
          yValue: stackedTotals[0], // 对应柱子的总高度
          content: `总费用: ${stackedTotals[0]}`,
          position: 'top',
          backgroundColor: 'transparent',
          font: { size: 14, weight: 'bold' },
          color: '#333'
        },
        // 图标标注
        costIcon: {
          type: 'image',
          xValue: 0,
          yValue: stackedTotals[0] - 20, // 图标在文本上方
          width: 16,
          height: 16,
          image: '/path/to/your/icon.png' // 替换为实际图标路径
        }
      }
    }
  }
};

关键注意事项 #

• 堆叠高度计算要包含所有数据集的数值，包括负数（比如你的Credit数据集），避免标注位置偏移。
• 自定义插件方式支持动态生成多个标注，适合批量处理场景。
• PrimeReact的Chart组件完全兼容Chart.js的原生配置，无需额外适配。

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