如何修改Chart.js气泡图Tooltip仅显示R轴数值？

要实现你需要的Tooltip格式，直接通过options.plugins.tooltip.callbacks.label自定义回调函数即可，核心是提取气泡的半径值（即数据组的第三个值）并重新拼接格式。

完整代码示例 #

const ctx = document.getElementById('bubbleChart').getContext('2d');
new Chart(ctx, {
    type: 'bubble',
    data: {
        datasets: [
            {
                label: 'Company 1',
                data: [{ x: 36, y: 192, r: 22.13 }],
                backgroundColor: 'rgba(54, 162, 235, 0.6)'
            },
            {
                label: 'Company 2',
                data: [{ x: 42, y: 205, r: 18.75 }],
                backgroundColor: 'rgba(255, 206, 86, 0.6)'
            }
        ]
    },
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: (context) => {
                        // 获取公司名称
                        const company = context.dataset.label;
                        // 获取气泡的目标数值（r字段）
                        const targetValue = context.parsed.r;
                        // 格式化输出，如需固定小数位数可用toFixed，比如targetValue.toFixed(2)
                        return `${company} (${targetValue}) Million`;
                    }
                }
            }
        }
    }
});

关键说明 #

• context.parsed.r：气泡图的每个数据点是{x, y, r}结构，r就是你需要展示的数值，通过这个属性直接提取
• 如果你的数据点里有自定义名称字段（而非依赖dataset的label），可以用context.raw.name（假设数据是{x:36,y:192,r:22.13, name: 'Company 1'}）
• 如需控制小数位数，把targetValue改成targetValue.toFixed(2)即可保留两位小数

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