如何让Highcharts六边形Tilemap填满整个设定的图表容器空间？

我之前也踩过这个坑，Highcharts的Tilemap默认自带了不少间距规则和自动尺寸计算逻辑，哪怕你手动设置了容器宽高，六边形也不会自动撑满整个区域。下面是几个核心调整点，帮你搞定这个问题：

• 清空所有默认留白设置：
  Highcharts图表本身和Tilemap系列都有默认的留白，必须全部清零：

  • 图表层面的spacing属性：控制图表内容与容器边缘的间距，设为[0, 0, 0, 0]消除上下左右的留白
  • Tilemap系列的pointPadding和groupPadding：控制六边形之间的间距，直接设为0即可

• 手动指定六边形尺寸：
  默认情况下Highcharts会自动计算六边形的size，但这个值通常不会匹配你的容器尺寸。你需要根据容器宽高手动设置size，同时要注意正六边形的固定比例：比如垂直布局的六边形，高度是宽度的2/√3（≈1.1547）倍；水平布局则反过来。让容器宽高贴合这个比例，再配合size设置，就能最大化填满区域。

给你一个调整后的代码示例参考：

Highcharts.chart('container', {
  chart: {
    type: 'tilemap',
    height: 200,
    width: 200,
    spacing: [0, 0, 0, 0] // 移除容器边缘留白
  },
  plotOptions: {
    tilemap: {
      pointPadding: 0,
      groupPadding: 0,
      size: 100, // 根据容器尺寸微调这个值，确保填满
      layoutAlgorithm: {
        type: 'hexagonal',
        orientation: 'vertical' // 可根据需求切换布局方向
      }
    }
  },
  series: [{
    data: [1],
    dataLabels: {
      enabled: false
    }
  }]
});

如果还是有细微留白，建议微调size值或者容器的宽高比例，让容器尺寸完全适配正六边形的比例，这样就能实现完美填满的效果了。

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