如何从极三角多边形图表中删除 y 轴内线和 o 至 100 个标签

Question

我们正在尝试一个极地类型的三角形多边形图表，我们想要从图表中删除内部 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)"
    }
  ]
});

看起来像这样

但我们希望图表是这样的 因此，为了实现这一目标，我们必须添加要删除的确切属性。请我们在这里。

Answer 1

要隐藏线条，只需设置

xAxis.gridLineWidth: 0;

并使用

xAxis.labels.enabled: false;

属性禁用标签。

演示：https://jsfiddle.net/BlackLabel/me0p4L9b/
API：https://api.highcharts.com/highcharts/yAxis.gridLineWidth
https://api.highcharts.com/highcharts/xAxis.labels.enabled