Highcharts饼图0值显示异常：非首字段100%时不渲染0值项

这确实是Highcharts饼图处理0值数据时的一个小细节坑！我来帮你搞定，让所有0值项的连接线都能稳定显示出来。

问题根源 #

Highcharts默认会对第一个0值的切片做优化——它觉得这个切片没有实际占比，就直接隐藏了连接线；但当0值项在非第一个位置时，它会保留一个极小的切片占位，所以连接线能正常显示。咱们要做的就是强制让所有0值项都保留占位，从而让线条稳定展示。

两种可行解决方案 #

方案1：全局设置最小点尺寸（简单高效）

通过plotOptions.pie.minPointSize给所有饼图点设置一个最小尺寸，哪怕是0值的点也会有一个极小的占位，这样连接线就会自动显示：

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            showInLegend: true, // 确保0值项在图例中同步显示
            minPointSize: 5, // 设置最小点大小，强制保留切片占位
            dataLabels: {
                enabled: true,
                connectorWidth: 1, // 确保连接线宽度不为0
                connectorColor: '#333'
            }
        }
    },
    series: [{
        name: 'Checks',
        data: [
            { name: 'Check1', y: 0 },
            { name: 'Check2', y: 100 }
        ]
    }]
});

方案2：为单个0值点强制开启切片（更灵活）

如果你只想针对特定的0值点处理，可以给每个0值的点手动设置slice: true，强制Highcharts为它创建切片占位：

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            showInLegend: true,
            dataLabels: {
                enabled: true,
                connectorWidth: 1,
                connectorColor: '#333'
            }
        }
    },
    series: [{
        name: 'Checks',
        data: [
            { name: 'Check1', y: 0, slice: true }, // 强制显示该点的切片占位
            { name: 'Check2', y: 100 }
        ]
    }]
});

效果验证 #

不管0值项在数据中的哪个位置，用上面两种方法都能让它的连接线稳定显示，和非第一个位置的0值项表现完全一致。

内容的提问来源于stack exchange，提问作者Anurag.Desai