如何在Chart.js工具提示中显示KB、MB、GB、TB单位

你可以直接复用X轴上的字节转换函数，通过配置tooltip的回调函数实现统一格式，具体步骤如下：

1. 确认字节转换函数
   先确保你已有一个能将字节转为KB/MB/GB的函数，没有的话可以直接使用这个：

function formatBytes(bytes, decimals = 2) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

2. 配置Tooltip格式化回调
   在Chart的options中找到tooltips配置，重写callbacks.label方法，调用格式化函数处理原始字节值：

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ['项目A', '项目B', '项目C'],
        datasets: [{
            label: '存储占用',
            data: [/* 从PHP获取的原始字节数据 */],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    // 你已有的X轴格式化回调
                    callback: function(value) {
                        return formatBytes(value);
                    }
                }
            }]
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    let label = data.datasets[tooltipItem.datasetIndex].label || '';
                    if (label) label += ': ';
                    // 水平条形图中，tooltipItem.xLabel对应原始字节值
                    label += formatBytes(tooltipItem.xLabel);
                    return label;
                }
            }
        }
    }
});

原理说明：Chart.js 2.8.0的水平条形图中，tooltipItem.xLabel会返回原始字节数值，和X轴ticks.callback接收的value是同一值，复用格式化函数就能保证单位显示一致。

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