Chart.js tooltip回调如何从数据集取值并拼接%符号展示

问题解答 #

方括号内应填写 tooltipItem.dataIndex，该参数是回调函数入参自带的属性，代表当前hover点位对应的数据在数据集数组中的下标索引。

适配你需求的完整tooltip配置代码： #

tooltip: {
    callbacks: {
        label: function (tooltipItem) {
            // 获取第一个数据集当前点位的数值
            const currentValue = myChart.data.datasets[0].data[tooltipItem.dataIndex];
            // 拼接%后返回作为tooltip展示内容
            return `${myChart.data.datasets[0].label}: ${currentValue}%`;
        }
    }
}

更灵活的优化方案 #

如果你需要两个利润率的tooltip都自动拼接%，不需要写死数据集下标，可使用通用写法：

tooltip: {
    callbacks: {
        label: function (tooltipItem) {
            // 自动获取当前hover的数据集
            const currentDataset = myChart.data.datasets[tooltipItem.datasetIndex];
            // 自动获取当前点位的数值
            const currentValue = currentDataset.data[tooltipItem.dataIndex];
            return `${currentDataset.label}: ${currentValue}%`;
        }
    }
}

你也可以直接用Chart.js内置的tooltipItem.raw属性直接获取当前点位数值，不需要手动从数据集数组取值，写法更简洁：

tooltip: {
    callbacks: {
        label: function (tooltipItem) {
            return `${tooltipItem.dataset.label}: ${tooltipItem.raw}%`;
        }
    }
}

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