隐藏值为 0 或 null 的列组 - Highcharts

Question

如何隐藏一组值为0或null的列（服务1和服务3）？

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]
       }
    ]
});

示例：https://jsfiddle.net/mg7yz2r6/1/

我需要图表看起来像这样。

Answer 1

最有效的方法是在创建图表之前预处理数据并删除这些值。例如：

const categories = [...];
const series = [...];

const indexesToRemove = [];

series[0].data.forEach((dataEl, index) => {
    if (series.every(s => !s.data[index])) {
        indexesToRemove.push(index);
    }
});

while (indexesToRemove.length) {
    const index = indexesToRemove.pop();
    categories.splice(index, 1);
    series.forEach(s => {
        s.data.splice(index, 1);
    });
}


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories
    },
    series
});

现场演示：https://jsfiddle.net/BlackLabel/fqt0rwpz/

---

如果不可能，您可以在空类别的位置动态添加 x 轴分隔符。

API 参考： https://api.highcharts.com/highcharts/xAxis.breaks