如何移除Highcharts环形图中的垂直白线

问题描述 #

Highcharts环形图出现垂直白线，已设置borderRadius: 0和borderWidth: 0但问题仍未解决。该白线有时在普通模式下显示，有时在全屏模式下始终出现。

已尝试的代码配置 #

{         
    "credits": { "enabled": false},
    "exporting": {"enabled": false},
    "legend": {
        "squareSymbol": true,
        "borderRadius": 0,
        "symbolRadius": 0,
        "symbolHeight": 12,
        "symbolWidth": 12,
        "useHTML": false,
        "enabled": true,
        "reversed": false,
        "maxHeight": 250,
        "floating": false,
        "itemStyle": {
            "color": "#22263D",
            "fontSize": "12px",
            "fontWeight": "700",
            "whiteSpace": "nowrap",
            "textOverflow": "ellipsis",
            "overflow": "auto",
            "width": "auto",
            "cursor": "default"
        },
        "layout": "horizontal",
        "align": "center",
        "verticalAlign": "bottom",
        "y": 7,
        "x": null,
        "padding": 10,
        "itemDistance": 20,
        "symbolPadding": 5
    },
    "chart": {
        "type": "pie",
        "backgroundColor": "#fff",
        "custom": {},
        "events": {}
    },
    "title": {"text": ""},
    "tooltip": {
        "outside": true,
        "backgroundColor": "#505575",
        "style": {"color": "#fff","fontSize": "12px"}
    },
    "plotOptions": {
        "pie": {
            "innerSize": "50%",
            "dataLabels": {
                "distance": 15,
                "enabled": true,
                "format": "{point.percentage:.0f}%",
                "style": {
                    "fontSize": "14px",
                    "textOutline": "none",
                    "opacity": 1,
                    "color": "black"
                }
            },
            "borderRadius": 0,
            "borderWidth": 1,
            "borderColor": "transparent",
            "showInLegend": true,
            "point": {"events": {}},
            "legendSymbol": "rectangle"
        }
    },
    "series": [{
        "type": "pie",
        "data": [{
            "name": "Sales",
            "y": 1745616.3607720993,
            "color": "#4E8DBE"
        }]
    }]
}

解决思路 #

• 修正borderWidth配置：当前代码中plotOptions.pie.borderWidth设为1，即便borderColor是transparent，也可能因渲染精度问题出现白线，直接将其改为0。
• 关闭动画消除渲染误差：在chart配置中添加animation: false，避免动画过程中的边缘渲染bug；或者在plotOptions.pie里设置animation: false。
• 替换innerSize的单位：把innerSize: "50%"改为具体像素值（如innerSize: 100），避免百分比计算带来的浮点精度误差导致边缘缝隙。
• 融合边框与图表颜色：在plotOptions.pie里设置borderColor: "#4E8DBE"（与系列颜色一致），即使存在边框也会和图表主体颜色融合，隐藏白线。
• 检查容器CSS样式：确认图表所在容器没有设置border、outline或box-shadow，这些样式可能被误认为是图表的白线。
• 升级Highcharts版本：如果使用的是旧版本，大概率是渲染bug导致，升级到最新稳定版即可修复。

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