如何让Highcharts Solidgauge的pane实现圆角效果？

针对你使用v9.1.2版本遇到的pane边缘直角问题，试试以下两种方案：

• 方案一：配置pane背景的borderRadius和strokeLinejoin
  把圆角设置直接放在pane.background的配置里，而不是全局设置，示例代码如下：

  pane: {
    startAngle: -90,
    endAngle: 90,
    background: [{
      backgroundColor: '#E6E6E6',
      borderColor: '#999',
      borderWidth: 2,
      // 设置圆角半径，数值越大圆角越明显
      borderRadius: 12,
      innerRadius: '75%',
      outerRadius: '100%',
      shape: 'arc',
      style: {
        // 确保线条连接处圆角
        strokeLinejoin: 'round'
      }
    }]
  }
  

  注意要保证borderWidth不为0，否则圆角不会显示。

• 方案二：自定义SVG路径绘制带圆角的pane
  如果方案一不生效，可以手动定义pane的背景路径，在路径中加入圆角参数。比如针对半圆仪表盘，你可以用path属性替代shape：

  pane: {
    startAngle: -90,
    endAngle: 90,
    background: [{
      backgroundColor: '#E6E6E6',
      borderColor: '#999',
      borderWidth: 2,
      // 自定义带圆角的弧形路径，r1/r2为圆角半径，根据实际尺寸调整
      path: function (pane) {
        var center = pane.center,
            innerRadius = pane.options.background[0].innerRadius,
            outerRadius = pane.options.background[0].outerRadius,
            r1 = 10, // 内圆角半径
            r2 = 10; // 外圆角半径
  
        return [
          'M', center[0] - outerRadius + r2, center[1],
          'A', outerRadius - r2, outerRadius - r2, 0, 0, 1, center[0] + outerRadius - r2, center[1],
          'L', center[0] + innerRadius + r1, center[1],
          'A', innerRadius - r1, innerRadius - r1, 0, 0, 0, center[0] - innerRadius - r1, center[1],
          'Z'
        ];
      },
      style: {
        strokeLinejoin: 'round'
      }
    }]
  }
  

你之前设置stroke-linejoin没生效，大概率是因为没把这个属性放在pane.background.style里，而是放在了全局或者其他错误层级。优先试方案一，基本能解决v9.1.2版本的问题。

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