Highcharts solidgauge反转角度方向报错 如何正确实现反向效果

问题复现 #

初始solidgauge配置如下：

{
  pane: {
    startAngle: 0,
    endAngle: 360,
  },
}

为添加反向展示功能，尝试通过反向标识直接切换起止角度：

{
  pane: {
    startAngle: this.inversed ? 360 : 0,
    endAngle: this.inversed ? 0 : 360,
  }
}

当this.inversed设置为true时，组件动画过程运行正常，但动画结束后抛出SVG渲染错误：

Error: <rect> attribute height: A negative value is not valid. ("-298.45130209103036")

报错原因 #

这个问题不属于框架bug，是配置写法不符合组件角度计算规则：SolidGauge内部默认要求*endAngle数值必须大于startAngle*，直接将反向状态下的endAngle设为0、startAngle设为360，会让角度跨度为负值，组件在动画结束计算进度条包围盒时会算出负的高度值，触发SVG属性校验错误。

正确实现方案 #

有两种无报错的实现方式，按需选择即可：

• 方案1：调整角度配置，保持角度跨度为正
  反向时不要将endAngle设为小于startAngle的值，将两个角度同时偏移360度，既保证视觉位置和正向一致，又能实现绘制方向反转：

  {
    pane: {
      startAngle: this.inversed ? 360 : 0,
      endAngle: this.inversed ? 720 : 360, // 始终保持endAngle - startAngle = 360
    }
  }
  

  非整圆的仪表盘（比如270度、180度环）也可以用这个逻辑，始终保持角度差为需要的圆弧跨度即可，不会出现负尺寸计算问题。
• 方案2：通过轴反转属性实现，无需修改pane角度
  直接开启Y轴的reversed配置，不需要调整pane的起止角度就能实现进度反向效果：

  {
    pane: {
      startAngle: 0,
      endAngle: 360, // pane配置无需改动
    },
    yAxis: {
      reversed: this.inversed, // 切换该属性即可控制正反向
      min: 0,
      max: 100 // 按实际业务配置轴范围
    }
  }
  

两种方案都不会触发动画结束后的负高度报错，动画效果和交互逻辑均正常。

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