Billboard.js堆叠图表：如何仅在Tooltip中显示数值总计？

完全可以实现只在Tooltip中显示堆叠数值总计，无需修改列标签（避免X轴和图例重叠问题），核心是利用tooltip.contents回调自定义Tooltip内容，具体实现方案如下：

实现步骤与代码示例 #

直接在图表配置中重写tooltip.contents函数，在函数内部计算当前堆叠项的总和，再将总计追加到Tooltip内容末尾：

var chart = bb.generate({
    data: {
        columns: [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25],
            ["data3", 150, 120, 110, 140, 115, 125]
        ],
        type: "bar",
        groups: [["data1", "data2", "data3"]] // 开启堆叠配置
    },
    tooltip: {
        contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
            // 计算当前堆叠组的数值总计
            const total = d.reduce((sum, item) => sum + item.value, 0);
            
            // 构建Tooltip基础内容（保留默认样式和数据展示逻辑）
            let content = "<table class='bb-tooltip'>";
            // 添加X轴标题
            content += `<tr><th colspan='2'>${defaultTitleFormat(d[0].x)}</th></tr>`;
            // 遍历添加各系列数据行
            d.forEach(item => {
                content += `
                    <tr>
                        <td style='color:${color(item.id)}'>${item.name}</td>
                        <td style='text-align:right'>${defaultValueFormat(item.value)}</td>
                    </tr>
                `;
            });
            // 追加总计行
            content += `
                <tr>
                    <td><strong>总计</strong></td>
                    <td style='text-align:right'><strong>${defaultValueFormat(total)}</strong></td>
                </tr>
            `;
            content += "</table>";
            
            return content;
        }
    }
});

关键说明 #

• tooltip.contents回调接收的d参数是当前Tooltip对应的所有堆叠数据项数组，通过reduce可快速计算总和
• 保留defaultTitleFormat和defaultValueFormat方法，确保Tooltip的标题格式、数值格式和图表全局配置一致
• 该方式完全不会修改X轴标签或图例内容，仅在Tooltip中显示总计，完美解决之前的重叠问题

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