Chart.js：如何在图表顶部添加各列数据集的求和值？

没问题，这在Chart.js中完全可以实现，以下是具体的实现步骤：

1. 先计算每列的数值总和 #

遍历你的数据集，算出每个索引位置上所有数据集的数值之和：

// 计算每列的求和值
const columnSums = datasets[0].data.map((_, idx) => {
  return datasets.reduce((total, ds) => total + ds.data[idx], 0);
});

2. 用Chart.js自定义插件绘制顶部文本 #

在图表配置中添加自定义插件，利用afterDraw钩子在每根柱子的顶部上方绘制对应的求和数值：

// 初始化图表
const myChart = new Chart(document.getElementById('your-chart-container'), {
  type: 'bar',
  data: {
    labels: ['项1', '项2', '项3', '项4', '项5', '项6'], // 替换为你的实际标签
    datasets: datasets
  },
  options: {
    // 这里可以添加你的图表配置，比如刻度、颜色等
  },
  plugins: [{
    afterDraw: (chart) => {
      const ctx = chart.ctx;
      // 遍历每个标签对应的柱子
      chart.data.labels.forEach((_, idx) => {
        // 获取第一组柱子的位置信息（同列柱子中心x坐标一致）
        const barMeta = chart.getDatasetMeta(0).data[idx];
        const barCenter = barMeta.getCenterPoint();
        const sumValue = columnSums[idx];

        // 设置文本样式
        ctx.font = '14px sans-serif';
        ctx.fillStyle = '#222';
        ctx.textAlign = 'center';
        // 在柱子顶部上方绘制求和值，可调整最后一个数值控制上下间距
        ctx.fillText(sumValue, barCenter.x, barCenter.y - barMeta.height - 8);
      });
    }
  }]
});

额外说明 #

• 如果你的图表不是柱状图，只需调整获取元素位置的逻辑即可，核心思路都是计算总和后在对应位置绘制文本。
• 可以根据需求修改文本的字体、颜色和位置，确保显示效果符合预期。
• 记得把代码中的your-chart-container替换为你实际的图表DOM元素ID，labels数组替换为你的真实标签内容。

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