Plotly点击事件异常求助：点击图表时e.layerX与e.layerY返回0

嘿，我之前也碰到过类似的Plotly.js事件坐标坑，给你几个排查方向和解决方案试试：

你遇到的e.layerX/e.layerY点击时返回0的情况，大概率是因为Plotly对点击事件的封装逻辑和鼠标移动事件不一样——原生DOM事件的坐标属性在Plotly的点击事件里可能被覆盖或者失效了，而移动事件的触发时机更直接，原生属性还能正常工作。

不要依赖原生DOM事件的坐标属性，改用Plotly内置的Plotly.d3.mouse()方法来获取相对于图表容器的准确坐标，这个方法在所有交互事件里都能稳定工作。

完整代码示例 #

把你原来的点击事件逻辑改成下面这样：

var graphDiv = document.getElementById('你的图表ID');
var maxXGraph = 24; 
var maxYGraph = 36; 
var xValueArray = ['0.25', '12.25', '22.23']; 
var yValueArray = []; // 假设你这里有对应的y值

// 点击创建点的事件处理
graphDiv.on('plotly_click', function(e) {
  // 用Plotly的d3方法获取坐标，替代e.layerX/e.layerY
  var [xPixel, yPixel] = Plotly.d3.mouse(this);
  
  // 获取图表的布局和尺寸信息
  var layout = this.layout;
  var graphWidth = this._size.width;
  var graphHeight = this._size.height;

  // 把像素坐标转换为图表的实际数值（适配你的maxXGraph/maxYGraph）
  var xValue = maxXGraph * (xPixel / graphWidth);
  var yValue = maxYGraph * (1 - yPixel / graphHeight); // 注意y轴是反向的，像素从顶部开始算

  // 添加新点到数组
  xValueArray.push(xValue.toFixed(2));
  yValueArray.push(yValue.toFixed(2));

  // 更新图表
  Plotly.update(graphDiv, {
    x: [xValueArray],
    y: [yValueArray]
  });
});

• 如果你的图表有坐标轴范围（不是从0开始），可以用layout.xaxis.range和layout.yaxis.range来做更精准的坐标转换，而不是直接用max值比例。
• 检查有没有其他元素（比如tooltip、图例）拦截了点击事件，可以在事件处理开头加e.stopPropagation()试试。

你可以把原来的layerX/layerY替换成上面的方法，应该就能解决点击时坐标为0的问题了。

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