如何移除极坐标三角形多边形图表的Y轴内部线条及0-100刻度标签
问题描述
我们正在制作一款极坐标类型的三角形多边形图表,希望移除图表中的Y轴内部线条以及0至100的刻度标签。
当前使用的代码如下:
Highcharts.chart('container', { "credits": { "enabled": false }, "chart": { "polar": true, "marginBottom": -25, "type": 'area', "plotBackgroundColor": null, "plotBorderWidth": null, "plotShadow": false, "style": { "fontWeight": 400, "fontSize": 11, "letterSpacing": "-0.06px", "lineHeight": "16px" } }, "tooltip": { "enabled": false }, "title": { "text": "" }, "xAxis": { "min": 0, "categories": [ "Category1", "Category2", "Category3" ], "tickmarkPlacement": "on", "lineWidth": 0, "gridLineWidth": 3, "labels": { "useHTML": true, "align": "center", "style": { "whiteSpace": "nowrap", "color": "#26415e", "fontSize": "12px" } } }, "yAxis": { "gridLineInterpolation": "polygon", "min": 0, "max": 100, "gridLineWidth": 3, "labels": { "align": "center", "y": 5, "x": 0, "style": { "color": "#333333", "fontSize": "10px" } } }, "plotOptions": { "series": { "marker": { "radius": 2.5 }, "states": { "hover": { "enabled": false }, "inactive": { "opacity": 1 } } }, "areaspline": { "dataLabels": { "enabled": false }, } }, "series": [{ "showInLegend": false, "data": [{ "y": 100, "color": "#dce1e6" }, { "y": 100, "color": "#dce1e6" }, { "y": 100, "color": "#dce1e6" } ], "color": "transparent", "pointPlacement": "on", "marker": { "symbol": "circle" }, }, { "showInLegend": false, "data": [{ "y": 36 }, { "y": 64 }, { "y": 33 } ], "pointPlacement": "on", "type": "area", "color": "rgba(80,227,181,0.5)" } ] });
当前图表效果:
期望的图表样式:
需要添加或移除哪些具体属性才能实现该效果?
解决方案
只需修改yAxis配置中的两个属性即可实现需求:
- 隐藏Y轴刻度标签:在
yAxis.labels中添加"enabled": false,直接关闭刻度标签的显示。 - 移除Y轴内部网格线:将
yAxis.gridLineWidth的值从3改为0,隐藏Y轴的所有网格线,仅保留通过series绘制的外层三角形边框。
修改后的yAxis配置代码如下:
"yAxis": { "gridLineInterpolation": "polygon", "min": 0, "max": 100, "gridLineWidth": 0, // 修改为0,移除内部网格线 "labels": { "enabled": false, // 添加该属性,隐藏刻度标签 "align": "center", "y": 5, "x": 0, "style": { "color": "#333333", "fontSize": "10px" } } },
修改完成后,图表会去掉Y轴的内部线条和刻度标签,与目标样式一致。
内容的提问来源于stack exchange,提问作者Sahithi Mangena
相关产品推荐
相关产品推荐

