Highcharts饼图展示0值数据：将[[0],[0],[0]]渲染为三等分切片

这个场景我之前做项目时遇到过，Highcharts默认会把值为0的饼图切片直接隐藏，所以传[[0],[0],[0]]时图表自然显示为空。要实现三个各占33.3%的切片，有两种实用的处理方式：

方法一：替换0为极小值（推荐） #

饼图是基于比例计算展示的，我们可以把每个0替换成一个非常小的数值（比如0.000001），这样计算出来的比例几乎完全相等，视觉上就是33.3%的切片，同时不会影响业务逻辑的准确性。

示例代码：

const originalData = [[0], [0], [0]];
// 转换数据，把0替换为极小值
const processedData = originalData.map(item => [item[0] || 0.000001]);

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    series: [{
        data: processedData,
        // 可选：强制显示所有切片的图例，避免极小值被隐藏
        showInLegend: true,
        allowPointSelect: true
    }]
});

方法二：手动固定切片占比 #

如果不想用极小值的技巧，也可以通过图表加载事件手动设置每个切片的占比，直接让每个切片显示为1/3的比例。这种方式需要修改Highcharts的默认计算逻辑，适合对数据展示有严格自定义需求的场景。

示例代码：

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        events: {
            load: function() {
                const targetSeries = this.series[0];
                // 给每个点设置相同的占比，并自定义标签显示
                targetSeries.points.forEach(point => {
                    point.update({
                        y: 1/3,
                        label: {
                            formatter: function() {
                                return `${this.name}: 33.3%`;
                            }
                        }
                    }, false);
                });
                this.redraw();
            }
        }
    },
    series: [{
        // 初始传入三个相同的非0值，用来生成基础切片结构
        data: [[1], [1], [1]],
        showInLegend: true
    }]
});

额外提一句：虽然你也提到这种场景更适合用柱状图，但如果业务必须用饼图处理全0边缘场景，上面两种方法都能满足需求。第一种方法更简洁，推荐优先使用，因为它复用了Highcharts原生的比例计算逻辑，不需要额外的事件处理。

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