17370845950

iPad上Canvas图表错位的根本原因是DPR未校准：需将canvas宽高设为CS

S尺寸×dpr，并调用ctx.scale(dpr,dpr)，且操作须在DOM挂载和CSS计算完成后执行。

Canvas绘图坐标系和iPad屏幕DPR不匹配导致错位

HTML5图表（尤其是用canvas绘制的）在iPad上导入数据后显示位置偏移，根本原因不是数据本身出错，而是canvas的逻辑像素与设备物理像素没对齐。iPad（特别是带Retina屏的型号）默认DPR（devicePixelRatio）为2或3，但很多图表库初始化canvas时没适配，导致绘制坐标被缩放两次——一次是CSS渲染缩放，一次是ctx.scale()未校准。

• 检查当前DPR：window.devicePixelRatio，iPad通常返回2或3
• 确保canvas.width和canvas.height设为CSS宽高 × DPR，而非直接取offsetWidth/offsetHeight
• 调用ctx.scale(dpr, dpr)前，必须先清空画布或重置变换矩阵，否则叠加缩放会加剧错位

ECharts / Chart.js在iPad上加载后坐标偏移的修复步骤

主流图表库默认不自动处理DPR，需手动干预初始化时机和渲染逻辑。以ECharts为例，错位常发生在setOption()后立即渲染，但此时容器尺寸可能未稳定，或resize()未触发。

• 延迟初始化：用setTimeout(() => chart.resize(), 100)避开iOS WebKit布局抖动
• 监听resize事件时，加防抖并强制重设devicePixelRatio相关配置
• Chart.js需在创建实例前设置devicePixelRatio: window.devicePixelRatio || 1，否则chart.canvas的width/height仍按1x计算

用CSS transform缩放图表容器引发的二次错位

有些方案为适配iPad横竖屏，对整个加了transform: scale(0.8)，这会让图表内部坐标系和事件坐标彻底脱节——鼠标/触点位置、tooltip定位、点击热区全偏移。

• 禁用容器级transform缩放，改用viewport meta控制或响应式font-size + rem布局
• 若必须缩放，需同步修正图表库的getBoundingClientRect()返回值，例如重写ECharts的convertFromPixel逻辑
• 测试触控点：用event.touches[0].clientX对比chart.convertFromPixel('grid', [x, y])输出，偏差超过10px基本可判定是缩放未对齐

// 示例：修复canvas DPR错位的通用init函数
function initHighDPICanvas(canvas) {
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  return ctx;
}

DPR校准不是“设了就完事”，关键在时机——canvas尺寸重设必须在DOM挂载完成且CSS计算完毕后执行，且不能和图表库自身的resize逻辑冲突。很多问题表面是数据错位，实际是渲染管线里某一层坐标没跟着DPR对齐。