Chart.js折线图：指针事件到Y轴值的精准映射实现

嘿，你完全不用自己写那个map函数来折腾像素到轴值的转换——Chart.js早就内置了专门的方法来搞定这个，既准确又优雅！下面给你两种靠谱的解决方案：

1. 用Y轴内置方法直接转换像素到数值 #

每个轴实例都提供了getValueForPixel()方法，它会自动忽略图例、边框这些非绘图区域，直接把鼠标的Y像素位置转换成对应的Y轴数值，完美解决你当前的精度问题。

修改你的moveDataSetPoint函数，替换掉原来的自定义map逻辑即可：

function moveDataSetPoint(points, evt) {
  // 读取激活的数据点
  var activePoint = points[0];
  var data = activePoint._chart.data;
  var datasetIndex = activePoint._datasetIndex;
  
  // 读取鼠标相对图表的位置
  const helpers = Chart.helpers;
  var position = helpers.getRelativePosition(evt, interactiveChart);
  
  // 获取Y轴实例，直接用内置方法转换像素到Y轴值
  const yAxis = activePoint._chart.scales.y;
  var yValue = yAxis.getValueForPixel(position.y);
  
  // 更新数据并刷新图表
  data.datasets[datasetIndex].data[activePoint._index] = yValue;
  window.myLine.update();
};

这个方法会自动处理轴的缩放、绘图区域的padding等所有细节，完全不用你手动维护yMin、yMax或者画布尺寸，精度直接拉满。

2. 手动获取图表主体区域尺寸（备用方案） #

如果你偶尔需要自己计算坐标，Chart.js的图表实例里有chartArea属性，它包含了纯绘图区域的精确坐标和尺寸：

const chartArea = activePoint._chart.chartArea;
// 绘图区域的高度：chartArea.bottom - chartArea.top
// 绘图区域的Y起始像素：chartArea.top
// 绘图区域的Y结束像素：chartArea.bottom

用这个区域来做自定义映射的话，精度会比用整个画布高很多，但还是优先推荐上面的getValueForPixel方法，因为它已经封装了所有复杂逻辑，省心又靠谱。

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