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

Question

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

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

效果很好，但是当图例右对齐或左对齐时，它不会完美地显示在中心，添加一个x位置来调整它是可以的，但没有响应。当你改变窗口大小时，它会有一些偏移。

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

我尝试使用加载/重绘来调整它，但我不知道为什么当我将重绘函数绑定(bind)到 react 组件时它不起作用，我将在其中做一些进一步的操作，所以我在创建时无法定义它选项。

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