如何在highcharts的饼图中动态居中图表标题位置答案

【问题标题】：How to center chart title position dynamically inside pie chart in highcharts如何在highcharts的饼图中动态居中图表标题位置
【发布时间】：2015-03-06 07:27:05
【问题描述】：

我正在做一个响应式饼图，它在其中的中心位置保持标题。我用过，

title: {
            text: "",
            margin: 0,
            y:0,
            x:0,
            align: 'center',
            verticalAlign: 'middle',
        },

但它在图表内并不完全居中。任何建议都将不胜感激。提前谢谢你。

这是链接：http://jsfiddle.net/LHSey/128/

【问题讨论】：

标签： javascript highcharts alignment title pie-chart

【解决方案1】：

更好的是删除标题并使用允许添加自定义文本的渲染器，每次都可以重新定位（当您重绘图表时）。只有你需要的是捕捉这个事件。

function addTitle() {

        if (this.title) {
            this.title.destroy();
        }

        var r = this.renderer,
            x = this.series[0].center[0] + this.plotLeft,
            y = this.series[0].center[1] + this.plotTop;
        this.title = r.text('Series 1', 0, 0)
            .css({
            color: '#4572A7',
            fontSize: '16px'
        }).hide()
            .add();

        var bbox = this.title.getBBox();
        this.title.attr({
            x: x - (bbox.width / 2),
            y: y
        }).show();
    }

chart:{
    events: {
                    load: addTitle,
                    redraw: addTitle,
            },
}

示例：http://jsfiddle.net/LHSey/129/

【讨论】：

专家解决方案。这对我来说真的很好。谢谢@Sabastian。
如果标题完全是基于文本的，它工作得很好。但是如果标题由图像组成，它不会考虑图像并且没有错误仍然存在。在使用 useHTML 的情况下：也它不锻炼。有什么方法可以实现吗？还有限制，如果标题超过单行。
您可以使用 next renderer for image 并使用相同的选项。因为 HTML 对象不能被“渲染”，因为 highcharts 使用的是 SVG 而不是 HTML。
如果我将字体大小更改为像 60 像素这样大，为什么它不垂直对齐？
@SebastianBochan 你能帮我如何在 HighchartsReact 中实现addTitle() 吗？

【解决方案2】：

我们可以使用chart.setTitle() 自定义标题的任何属性，如下所示。我添加了标题并将useHTML 属性设置为true。

chart: {
            events: {
                    load: function () {
                        this.setTitle({text: 'Title',useHTML:true});
                    } 
            }
    }

【讨论】：