我们如何从 Highchart 圆环图中删除白色垂直线

问题描述 投票:0回答:1

我的图表显示垂直白线,如图所示。 我已经设置了 borderRadius: 0 和 borderWidth: 0 但它仍然不起作用。有时它会以正常模式显示,有时它会始终以全屏模式显示。有人对此有想法吗?

图像 - chart 以下是我尝试过的代码。

{         
"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"
            }
        ]
    }
]

}

highcharts donut-chart angular2-highcharts
1个回答
0
投票

我发现该行仅出现在样式模式下。要隐藏它,您需要添加以下 CSS:

.highcharts-point {
    stroke-width: 0;
}

现场演示:https://jsfiddle.net/BlackLabel/ghbkqz6f/

文档: https://www.highcharts.com/docs/chart-design-and-style/style-by-css

© www.soinside.com 2019 - 2024. All rights reserved.