放大时热图单元格之间的白线（浏览器缩放）

Question

我有以下问题：

Highcharts.chart('container', {

  chart: {
    style: {
        fontFamily: '"Roboto", sans-serif'
    },
    animation: false,
    zoomType: 'xy'
  },...

在不放大浏览器的情况下看起来不错：

当我放大时（浏览器缩放，Chrome）：

有人知道为什么会出现这些白线吗？

解决方法是增加 rowSize /colSize 以便它们重叠，但这并不好...

Answer 1

问题已在 Highcharts GitHub 存储库中报告：https://github.com/highcharts/highcharts/issues/6783

简而言之，这是由 shape-rendering 属性引起的，默认设置为 geometricPrecission。要解决它，您只需要在每个具有 .highcharts-point class 的元素上将此参数值设置为 optimizeSpeed，如下所示：

.highcharts-point {
  shape-rendering: optimizeSpeed;
}

实例： https://codepen.io/anon/pen/WgKwOe

放大时热图单元格之间的白线（浏览器缩放）

White lines between heatmap cells when zooming in (browser zoom)

javascript

heatmap

highcharts