Highcharts 可变半径饼图-外圆

Question

我在我的应用程序中实现了一个 Highchart.js 变量饼图。 我需要在整个图表上显示外圆/边框，而不是单个切片，以便我们可以轻松地看到有多少切片被完全或部分填充。

我尝试了borderWidth，lineWidth等，但没有运气。 有没有办法实现相同的？ 需要 output 有点像图像。

Answer 1

您可以使用 Highcharts.SVGRenderer class 渲染所有其他 svg 元素。 在这里您可以找到一个带有所需圆圈的示例：

events: {
  render: function() {
    const series = this.series[0],
      center = series.center,
      x = center[0] + this.plotLeft,
      y = center[1] + this.plotTop,
      r = Math.max(...series.radii);

    if (!this.customCircle) {
      this.customCircle = this.renderer.circle(
        x, y, r
      ).attr({
        stroke: 'red',
        zIndex: 3,
        fill: 'rgba(0,0,0,0)',
        'stroke-width': 1
      }).add();
    } else {
      this.customCircle.attr({ x, y, r });
    }
  }
}

---

现场演示： https://jsfiddle.net/BlackLabel/r985mdkh/

API 参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle