Highcharts在Chrome中宽度≥1727px时出现折线扭曲问题求解

这个是Chrome 94~96版本的已知2D Canvas渲染精度bug，触发条件和设备像素比强相关：16英寸MacBook Pro的默认设备像素比为2，当图表宽度设置为1727px时，canvas实际绘制宽度为1727*2=3454px，刚好触发Chrome内部的坐标计算精度溢出，导致折线路径绘制扭曲，该问题仅出现在这几个版本的Chrome中，其他浏览器不受影响。

• 方案1：禁用Highcharts的Canvas加速渲染，强制走SVG绘制。在图表初始化配置中添加如下参数即可：

chart: {
  renderer: 'SVG'
},
plotOptions: {
  series: {
    boost: {
      enabled: false
    }
  }
}

优先推荐该方案，不受浏览器版本限制，适配所有场景，普通数据量级的折线图不会有明显性能损耗。

• 方案2：调整setSize调用参数，强制触发全量重绘。将现有尺寸调整代码的第三个参数设为true，修改后代码如下：

document.getElementById('small').addEventListener('click', () => {
    chart.setSize(1726, 300, true);
});

document.getElementById('medium').addEventListener('click', () => {
    chart.setSize(1727, 300, true);
});

document.getElementById('large').addEventListener('click', () => {
    chart.setSize(1900, 300, true);
});

document.getElementById('xtraLarge').addEventListener('click', () => {
    chart.setSize(3900, 300, true);
});

该方案不需要修改图表初始化配置，适合临时修复场景。

• 方案3：升级Chrome浏览器到97及以上正式版，该Canvas渲染bug已被Chrome官方在97版本中修复，升级后无需修改代码即可恢复正常。

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