Highcharts可变半径饼状图-外圈图

Question

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

我尝试了borderWidth，lineWidth等，但没有成功。有什么方法可以实现同样的功能吗？需要的输出有点像图片。

Answer 1

你可以通过使用Highcharts.SVGRenderer类来渲染所有额外的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.netBlackLabelr985mdkh

API参考。 https:/api.highcharts.comclass-referenceHighcharts.SVGRenderer#circle