ChartJS 3.8.0堆叠条形图是否支持标签合并功能

问题描述 #

在Chart.js 3.8.0版本中，是否可以在堆叠条形图上实现合并标签效果？目前找到的最接近的解决方案是为tooltip添加footer回调，手动在提示框内追加额外文本，但该方案无法展示对应数据集关联的图例/颜色图标。
附现有可运行示例：

HTML代码 #

<html>
<head></head>
<body>
<h1>
Stacked Bar Chart (chart.js)
</h1>
  <canvas id="chart_display"></canvas>
</body>
</html>

JavaScript代码 #

const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  datasets: [
    {
    label: 'Retained',
    data: [62,68,74,80,66,84],
    backgroundColor: 'rgb(0, 178, 169)',
    order: 3,
    stack: 'stack1'
    },
    {
      label: 'Expired',
      data: [5,3,7,9,2,4],
      backgroundColor: 'rgb(207, 16, 45)',
      order: 3,
      stack: 'stack1'
    }
  ]
}

const config = {
    type: 'bar',
  data: data,
  options: {
    scales: {
        x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    }
  },
};

const reportOutput = new Chart(
    document.getElementById('chart_display'),
  config
);

• 可在JSFiddle平台搜索示例ID a6ym1t04/8 查看在线运行效果
• 查阅官方文档发现3.5.0版本的官方堆叠条形图示例支持该合并标签效果，需要确认3.8.0版本是否存在可直接开启该效果的简单配置项。

实现方案 #

3.8.0版本没有单独的“合并标签”专属配置开关，3.5.0示例中的合并标签效果本质是配置了正确的tooltip触发模式，不需要降级版本或者引入第三方插件。
footer回调追加文本无法显示色标的原因是footer区域默认不渲染数据集对应的颜色标识，不需要用footer拼接条目内容，直接修改tooltip配置即可实现带完整颜色图例的合并提示框，核心配置如下：

const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      tooltip: {
        // 核心配置：按索引触发，显示同一X轴分类下所有堆叠数据集内容
        mode: 'index',
        intersect: false,
        callbacks: {
          // 可选：追加总计行到tooltip底部，不影响上方数据集自带的颜色图例
          footer: (context) => {
            const total = context.reduce((sum, item) => sum + item.parsed.y, 0);
            return `总计：${total}`;
          }
        }
      }
    },
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    }
  },
};

该配置下tooltip会自动渲染每个数据集对应的颜色块、标签名、数值，和默认tooltip的图例样式完全一致，不存在色标缺失的问题。

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