如何在Highcharts中隐藏值为0或null的列组（如service1、service3）

需求：隐藏x轴上所有系列对应数据均为0或null的列组（如示例中的service1和service3），仅保留至少有一个系列数据非0且非null的分类。

当前实现代码：

Highcharts.chart('container', {
    chart : {type: 'column'},
    xAxis: { categories: ["service 1", "service 2", "service 3", "service 4"] },
    series: [
       { name: 'person1',
         data: [0,2,null,6],
       },
       { name : 'person2',
         data: [0,6,null,5]
       }
    ]
});

当前图表效果：

期望图表效果：

解决方案 #

核心思路是预处理数据，筛选出符合条件的分类及对应数据：遍历每个分类的所有系列数据，仅保留至少有一个系列数据非0且非null的分类，同时提取对应系列的该位置数据。

修改后的完整代码：

// 原始数据
const originalCategories = ["service 1", "service 2", "service 3", "service 4"];
const originalSeries = [
  { name: 'person1', data: [0,2,null,6] },
  { name : 'person2', data: [0,6,null,5] }
];

// 筛选有效分类的索引：至少有一个系列数据不为0且不为null
const validIndices = originalCategories.reduce((indices, _, idx) => {
  const hasValidData = originalSeries.some(series => {
    const value = series.data[idx];
    return value !== 0 && value !== null;
  });
  if (hasValidData) indices.push(idx);
  return indices;
}, []);

// 生成处理后的分类和系列数据
const filteredCategories = validIndices.map(idx => originalCategories[idx]);
const filteredSeries = originalSeries.map(series => ({
  ...series,
  data: validIndices.map(idx => series.data[idx])
}));

// 初始化图表
Highcharts.chart('container', {
  chart: { type: 'column' },
  xAxis: { categories: filteredCategories },
  series: filteredSeries
});

说明 #

• 该方法通过提前过滤数据，确保图表只渲染有有效数据的列组，避免了在图表配置中做复杂的显示控制。
• 若数据是动态生成的，此逻辑同样适用，只需替换originalCategories和originalSeries为你的动态数据源即可。

内容的提问来源于stack exchange，提问作者Massimo di Segni