You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除极坐标三角形多边形图表的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配置中的两个属性即可实现需求:

  1. 隐藏Y轴刻度标签:在yAxis.labels中添加"enabled": false,直接关闭刻度标签的显示。
  2. 移除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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.28 10:14:51