如何在带图例的圆环图中间显示标题？(react-highcharts)

Question

我知道如何使用此选项将其居中：

 title: {
    text: "This is title",
    align: "center",
    verticalAlign: "middle",
  },

效果很好，但是当有图例左对齐或右对齐时，它不会完美地显示在中间，添加一个x位置来调整它就可以了，但没有响应。当您更改 window 大小时，它会有一些偏移量。

这是演示： https://stackblitz.com/edit/react-highchart-jjzjx118

我试过使用load/redraw来调整它，但我不知道为什么当我绑定重绘函数到反应组件时它不起作用，我会在其中做一些进一步的操作所以我无法定义当我创建选项时它。

Answer 1

您可以在 render 回调函数中定位标题：

chart: {
    events: {
        render: function() {
            var seriesElPos = this.seriesGroup.getBBox();

            this.title.attr({
                x: seriesElPos.width / 2 + seriesElPos.x
            });
        }
    }
}

---

现场演示： http://jsfiddle.net/BlackLabel/6m4e8x0y/4760/

API参考：

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

https://api.highcharts.com/highcharts/chart.events.render