如何修改Highcharts创建的雷达（极坐标）图的框线样式

自定义雷达图三类线条的配置方案 #

你提到的三类线条分别对应Highcharts极坐标图的不同配置项，修改方法如下：

• 外侧红色三角形线条：y轴最大刻度对应的多边形网格线，属于y轴网格线配置范畴
• 中心指向各个角的蓝色线条：x轴的径向网格线，属于x轴网格线配置范畴
• 内侧绿色小三角形线条：y轴中间刻度对应的多边形网格线，可通过指定y轴刻度位置后单独修改样式

你之前修改yAxis.lineWidth只改变上方竖线，是因为该属性控制的是y轴自身的径向轴线，而非网格线。

以下是修改后的完整代码，已针对三类线条做了自定义配置，你可以按需调整颜色、宽度参数：

window.chart = Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    polar: true,
    type: 'area',
    // 图表加载完成后修改不同刻度网格线的样式
    events: {
      load: function () {
        const yGridLines = this.yAxis[0].gridGroup.element.children;
        // 索引0是中心0刻度线，1是50刻度（内侧绿色小三角），2是100刻度（外侧红色三角）
        yGridLines[1].setAttribute('stroke', 'green');
        yGridLines[1].setAttribute('stroke-width', 2);
        yGridLines[2].setAttribute('stroke', 'red');
        yGridLines[2].setAttribute('stroke-width', 3);
      }
    }
  },
  title: {
    text: "radar chart title",
    margin:33,
    useHTML:true
  },
  tooltip: {
    pointFormat: '<span style="color:{series.color}"><b>{point.y:,.0f}</b>'
  },
  plotOptions: {
    animation:true
  },
  xAxis: {
    categories: ["a","b","c"],
    tickmarkPlacement: 'on',
    lineWidth: 0,
    // 配置中心指向各角的蓝色线条样式
    gridLineWidth: 2,
    gridLineColor: 'blue'
  },
  yAxis: {
    gridLineInterpolation: 'polygon',
    gridLineWidth: 1,
    min: 0,
    max:100,
    // 指定刻度位置，生成需要的内侧、外侧三角形网格线
    tickPositions: [0,50,100]
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: "Haha",
    animation:true,
    data: [52,119, 12],
    lineWidth:4
  }]
});

配套HTML代码和原有一致：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 400px"></div>

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