Highcharts分组条形图：移除Null值条形占位并自动调整剩余条形宽度

嗨Durgesh，我之前也碰到过一模一样的问题，咱们来一步步搞定它！

首先得搞清楚为什么会出现这种多余的间隙：Highcharts默认会为每个系列的所有分类位置预留空间，哪怕对应的值是null。也就是说，你每个主分类下原本被配置了8个条形的占位（4个主分类×2个子分类的全量映射），哪怕值是null，Highcharts也会给这个位置留空，所以就出现了不必要的间隙。

解决这个问题的核心思路是：只保留有实际数值的条形数据，让Highcharts只渲染存在的点，自动分配空间。下面是具体的实现步骤：

第一步：预处理数据，过滤Null值 #

我们需要遍历原始数据，把每个子系列中值为null的条目彻底移除，同时明确每个有效数据点对应的主分类位置。比如把原来的数组格式数据，转换成带x（主分类索引）和y（数值）的对象格式，这样Highcharts就只会在有数据的位置绘制条形。

举个代码示例（完全贴合你的数据结构）：

// 你的主分类列表
const mainCategories = ['Class T', 'Class S', 'Class D', 'Class I'];
// 你的子分类列表
const subCategories = ['Class T', 'Class T 2', 'Class S', 'Class S 2', 'Class D', 'Class D 2', 'Class I', 'Class I 2'];

// 原始数据（包含null值，模拟你的场景）
const rawData = [
  [5, null, 3, null], // Class T对应4个主分类的数值
  [null, 8, null, 6], // Class T 2对应4个主分类的数值
  [2, null, 4, null], // Class S对应4个主分类的数值
  [null, 7, null, 9], // Class S 2对应4个主分类的数值
  [null, null, 1, null], // Class D对应4个主分类的数值
  [null, null, null, 5], // Class D 2对应4个主分类的数值
  [6, null, null, null], // Class I对应4个主分类的数值
  [null, 4, null, null]  // Class I 2对应4个主分类的数值
];

// 预处理：过滤每个系列中的null值，转换为{x, y}格式的有效点
const processedSeries = subCategories.map((name, index) => {
  // 遍历当前子系列的所有数值，只保留非null的点
  const validPoints = rawData[index].map((value, catIndex) => {
    if (value !== null) {
      return { x: catIndex, y: value }; // x对应主分类的索引位置
    }
    return null;
  }).filter(point => point !== null); // 彻底移除null的占位项

  return {
    name: name,
    data: validPoints
  };
});

第二步：调整Highcharts配置，让条形自动适配空间 #

接下来在图表配置中，确保分组功能正常，同时调整间距参数让剩余条形填满可用区域：

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  xAxis: {
    categories: mainCategories,
    title: { text: null }
  },
  yAxis: {
    min: 0,
    title: { text: '数值' }
  },
  plotOptions: {
    bar: {
      grouping: true, // 保持分组功能，让同主分类的条形归为一组
      groupPadding: 0.1, // 主分类之间的间距（可根据视觉需求调整）
      pointPadding: 0.05, // 同组内条形的间距
      borderWidth: 0
    }
  },
  series: processedSeries // 使用预处理后的有效数据
});

为什么这样有效？ #

经过数据预处理后，每个子系列只会包含有实际数值的点，Highcharts不会再为null值的位置预留空间。同时开启grouping: true后，同主分类下的所有有效条形会自动调整宽度，填满该分类的可用区域，完美解决你遇到的间隙问题。

如果需要更精细的视觉调整，你可以微调groupPadding和pointPadding的数值，或者根据需求设置pointWidth为固定值（不过自动计算的方式更适配不同的数据量）。

这样调整后，你的图表应该就能达到预期的效果了——没有多余的空白占位，剩余条形自动填满空间。如果还有细节问题，随时告诉我哦！

备注：内容来源于stack exchange，提问作者user29088932