Highcharts创建带圆角环形图（Donut Chart）无法显示为正圆形问题咨询

• 开启强制正圆配置：在plotOptions.pie下添加circular: true，该配置会强制饼图渲染为正圆形，不受容器宽高比例的挤压影响。
• 移除全量扇区的sliced: true属性：你当前给所有扇区都开启了切割偏移，每个扇区沿径向向外偏移6px会直接破坏整体正圆形轮廓。如果需要扇区间隔效果，可以通过设置borderWidth配合borderColor为容器背景色实现，比切割偏移的效果更规整。
• 调整容器样式：建议给图表容器设置正方形宽高，从根源避免图表被拉伸变形。
• 可选配置：如果需要环形圆角效果，可在plotOptions.pie下添加borderRadius参数自定义圆角大小。

调整后示例代码 #

/* 容器样式 */
#container {
  width: 400px;
  height: 400px;
}

var data2 = [
    {
        "data": [
            {
                "name": "Positve",
                "y": 50,
                "color": "#2CA02C"
            },
            {
                "name": "Negative",
                "y": 25,
                "color": "#B23333"
            },
            {
                "name": "Neutral",
                "y": 25,
                "color": "#E5CF73"
            }
        ]
    }
]
window.mychart = Highcharts.chart('container', {
    chart: {
        type: 'pie',
        plotShadow: false,
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        pie: {
            innerSize: '80%', // 调整比例控制环形粗细
            borderWidth: 2,
            borderColor: '#ffffff', // 与背景同色实现扇区间隔
            circular: true, // 强制正圆
            borderRadius: 8, // 圆角效果
            slicedOffset: 6,
            dataLabels: {
                connectorWidth: 0,
                enabled: false
            }
        }
    },
    title: {
        verticalAlign: 'middle',
        floating: true,
        text: ''
    },
    legend: {},
    series: data2,
});

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