如何获取Highcharts环形饼图的内环直径？

要获取Highcharts环形饼图的内环直径，你可以用以下两种实用方法：

方法1：基于配置与图表尺寸计算 #

如果你的innerSize设为百分比（比如示例中的"40%"）：

1. 饼图的实际直径取chart.plotWidth和chart.plotHeight中的较小值（饼图为正圆，会适配容器最小边）
2. 内环直径 = 饼图实际直径 × 百分比数值（如40%对应0.4）

若innerSize是固定像素值（如"120px"），直接解析该值就是内环直径。

方法2：通过系列的center属性推导 #

饼图系列渲染后会生成center数组，格式为[中心X坐标, 中心Y坐标, 外环半径]，结合innerSize比例计算：

1. 内环半径 = 外环半径 × (innerSize百分比数值)
2. 内环直径 = 内环半径 × 2

代码示例 #

在图表加载完成后获取并打印内环直径：

Highcharts.chart('container', {
   chart: {
        type: 'pie',
        events: {
            load: function() {
                const chart = this;
                const pieSeries = chart.series[0];
                const innerSizePercent = parseFloat(pieSeries.options.innerSize) / 100;

                // 方法1计算
                const pieDiameter = Math.min(chart.plotWidth, chart.plotHeight);
                const innerDiameterFromSize = pieDiameter * innerSizePercent;

                // 方法2计算
                const outerRadius = pieSeries.center[2];
                const innerDiameterFromCenter = outerRadius * innerSizePercent * 2;

                console.log('内环直径（方法1）:', innerDiameterFromSize);
                console.log('内环直径（方法2）:', innerDiameterFromCenter);
            }
        }
    },
    series: [{
        innerSize: "40%",
        data: [70.67, 14.77]
    }]
});

补充说明 #

• 两种方法计算结果完全一致，可根据使用场景选择
• 若innerSize为像素值，直接用parseFloat(pieSeries.options.innerSize)即可得到内环直径，无需比例计算

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