如何将Chart.js柱状图hover时tooltip的数值修改为对应自定义文本

问题原因 #

你的配置未生效主要是两个常见问题：

1. Chart.js v3+ 版本的tooltip配置项为单数 tooltip，放置在 plugins 节点下，你用了v2版本的复数 tooltips 命名，导致配置不识别
2. 你原始代码中 label: chart 1 缺少引号，属于语法错误，会阻塞代码运行

解决方案 #

根据你使用的Chart.js版本选择对应配置即可：

如果你使用的是 Chart.js v3/v4 （目前主流版本） #

完整可运行代码如下：

// 修正后的配置
const options = {
  scales: {
    x: {
      grid: {
        display: false,
      }
    },
    y: {
      display: false
    },
  },
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          const value = context.raw;
          // 自定义数值映射逻辑
          let showText = '';
          switch (value) {
            case 1:
              showText = 'start';
              break;
            case 2:
              showText = 'partial';
              break;
            case 3:
              showText = 'full';
              break;
            case 4:
              showText = 'end';
              break;
            default:
              showText = value;
          }
          return showText;
        }
      }
    }
  }
};

var config = {
  type: 'bar',
  data: {
    labels: ['date 1','date 2','date 3','date 4'],
    datasets: [{
      data: [3, 2, 1, 3],
      label: 'chart 1', // 这里补全了引号修复语法错误
      borderWidth: 1
    }]
  },
  options: options,
}
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, config);

如果你使用的是 Chart.js v2 版本 #

仅需要修改options配置即可，其余代码不变：

const options = {
  scales: {
    x: {
      grid: {
        display: false,
      }
    },
    y: {
      display: false
    },
  },
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        const value = tooltipItem.yValue;
        // 和上面一样的映射逻辑
        let showText = '';
        switch (value) {
          case 1: showText = 'start'; break;
          case 2: showText = 'partial'; break;
          case 3: showText = 'full'; break;
          case 4: showText = 'end'; break;
          default: showText = value;
        }
        return showText;
      }
    }
  }
};

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