如何控制Highcharts Item Chart（华夫饼图）的元素间距？

Highcharts的Item Chart默认会根据容器宽度自动分配列布局空间，这就导致你设置itemPadding:1后，行间距符合预期但列间距被自动拉伸变大。以下是两种有效解决方法：

方法一：固定Marker尺寸+缩小图表留白 #

通过显式定义方块的宽高，同时减少图表左右两侧的留白，避免布局自动填充多余空间：

Highcharts.chart('container', {
  chart: {
    type: 'item',
    // 移除图表左右默认留白
    spacingLeft: 0,
    spacingRight: 0
  },
  series: [{
    marker: {
      symbol: 'square',
      // 固定方块的宽高，可根据需求调整数值
      width: 15,
      height: 15
    },
    itemPadding: 1,
    rows: 10,
    data: [
      { name: 'Male', y: 43 },
      { name: 'Female', y: 57 }
    ]
  }]
});

方法二：动态计算容器宽度（精准匹配布局） #

如果需要完全贴合方块总宽度，可通过JavaScript动态计算容器的合适宽度，确保列之间只有itemPadding的间距：

const itemSize = 15; // 方块尺寸
const itemPadding = 1; // 间距
const rows = 10;
const totalItems = 100; // 华夫饼总格子数
const cols = Math.ceil(totalItems / rows);

// 计算容器所需宽度：列数*方块宽 + (列数-1)*间距
const containerWidth = cols * itemSize + (cols - 1) * itemPadding;

// 设置容器宽度
document.getElementById('container').style.width = `${containerWidth}px`;

// 初始化图表
Highcharts.chart('container', {
  chart: {
    type: 'item'
  },
  series: [{
    marker: {
      symbol: 'square',
      width: itemSize,
      height: itemSize
    },
    itemPadding: itemPadding,
    rows: rows,
    data: [
      { name: 'Male', y: 43 },
      { name: 'Female', y: 57 }
    ]
  }]
});

原理说明 #

itemPadding属性实际上是同时控制行和列间距的，但默认布局会优先填充容器的可用宽度，导致列间距被放大。通过固定方块尺寸或限制容器宽度，就能让itemPadding的间距设置在列方向上生效。

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