Amcharts 4：页面缩放95%时光标与鼠标位置不匹配问题求助

问题根源 #

当通过CSS transform: scale(0.95) 缩放body时，浏览器鼠标事件的坐标仍基于原始文档尺寸，但AmCharts 4默认未适配父元素的缩放比例，导致图表内部光标位置计算出现偏差。

具体解决方案 #

方案1：重写图表坐标转换方法 #

初始化图表后，修改其toLocal方法，手动将鼠标坐标按缩放比例修正：

// 页面缩放比例，对应CSS里的0.95
const scaleRatio = 0.95;

// 图表初始化完成后添加以下代码
chart.toLocal = function(point) {
  const originalPoint = am4core.svgElement.prototype.toLocal.call(this, point);
  return {
    x: originalPoint.x / scaleRatio,
    y: originalPoint.y / scaleRatio
  };
};

方案2：调整缩放目标至图表容器 #

避免直接缩放body，改为缩放图表的父容器，并设置变换原点确保坐标计算正确：

.chart-wrap {
  transform: scale(0.95);
  transform-origin: top left;
  width: 100%;
  height: 500px; /* 匹配图表高度 */
}

将图表挂载到这个.chart-wrap容器内，AmCharts会自动基于容器变换后的尺寸计算坐标，无需额外修正。

方案3：动态获取缩放比例（适配动态缩放场景） #

如果页面缩放比例会动态变化，可通过JS实时获取当前缩放值并修正：

// 获取元素的实际缩放比例
function getElementScale(el) {
  const transformStyle = getComputedStyle(el).transform;
  if (transformStyle === 'none') return 1;
  const transformValues = transformStyle.split('(')[1].split(')')[0].split(',');
  // 取X轴缩放值（假设为等比缩放）
  return parseFloat(transformValues[0]);
}

// 初始化图表后执行
const bodyScale = getElementScale(document.body);
chart.toLocal = function(point) {
  const originalPoint = am4core.svgElement.prototype.toLocal.call(this, point);
  return {
    x: originalPoint.x / bodyScale,
    y: originalPoint.y / bodyScale
  };
};

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