Chart.js散点图数据点悬浮提示x轴月份标签显示错误如何修复

问题根因 #

Chart.js 2.9.x版本的散点图默认对x值做数值类型解析，传入字符串"March"时，框架无法解析为有效数值，会默认赋值为索引0。渲染点位时因为x轴配置为category类型，会按字符串匹配labels数组找到对应索引2渲染，所以点位位置正确，但tooltip读取的是解析后的数值索引0，对应labels数组第一项January，因此出现显示错误。 #

修复方案 #

方案1：将x值替换为对应标签的索引（最简洁） #

直接使用目标标签在labels数组的索引作为x值即可，无需修改其他配置：

var xyValues = [
  // March对应labels数组的索引为2，直接传数值作为x值
  {x: 2, y:15},
];

修改后点位位置和tooltip都会自动匹配正确的标签。 #

方案2：自定义tooltip回调（保留原字符串x值） #

如果不想改动原有数据格式，可重写tooltip的标题回调，手动匹配x轴标签：

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }],
      yAxes: [{ticks: {min: 6, max:16}}],
    },
    // 新增tooltip自定义配置
    tooltips: {
      callbacks: {
        title: function(tooltipItems, data) {
          // 读取当前点位对应x轴的实际标签
          const xLabel = this._chart.scales['x-axis-0'].labels[tooltipItems[0].index];
          return `${xLabel} ${tooltipItems[0].yLabel}`;
        }
      }
    }
  }
});

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