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

w6mmgewl 于 2023-10-20 发布在 Highcharts

关注(0)|答案(1)|浏览(135)

如何隐藏一组值为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/

我需要这样的图表。

highcharts

来源：https://stackoverflow.com/questions/77181837/hide-group-of-columns-with-values-0-or-null-highcharts

1条答案

按热度按时间

eh57zj3b1#

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

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

赞(0）回复(0）举报 2023-10-20