Highcharts：如何在饼图的中间对齐文本标签

Question

我通过thomas_rz编辑codepen.io

https://codepen.io/thomas_rz/pen/vXyoaK?editors=1010

[Object: null prototype] {   
  userId: '5cb51b16e6161e6e5cb51b16',  
  matchId: '5cb51b16e6161e6e401262c2', 
 predictionModelId:'5ca0f4afb88b3a2e006faa0d',   ....

并返回此图表。

但是我需要这张图表，文字要对齐饼图的中心

Answer 1

数据标签对齐说明：

Pie的数据标签默认情况下不支持这种外观。

在Highcharts中，数据标签的位置与其连接器的位置密切相关。您在演示中禁用了连接器，这就是这些标签看起来放错位置的原因。

算法始终确保标签的 VERTICAL 边缘（标签被视为盒子）的中心接触到连接器的末端。您的要求是连接器应该能够触摸标签框的 ANY 部分（垂直或水平）：

如果不进行高级Highcharts核心修改，就无法实现。

解决方法：

通过重新定义两个核心功能，我能够实现非常接近您所需的功能：

(function(H) {
  H.seriesTypes.pie.prototype.dataLabelPositioners.radialDistributionX = function(series, point) {
    return point.labelPosition.natural.x - (point.half ? -0.5 : 0.5) * point.dataLabel.width;
  }
  H.seriesTypes.pie.prototype.dataLabelPositioners.radialDistributionY = function(point) {
    return point.labelPosition.natural.y;
  }
})(Highcharts);

实时演示：http://jsfiddle.net/BlackLabel/htk40ena/

以上代码强制Highcharts更改连接器接触标签的位置。请注意，在我的演示中，连接器没有意义（尝试启用它们）。

Answer 2

计算中的高位图未考虑带有<br>标签的正确标题高度。您可以在render事件中计算标题的正确位置：

chart: {
    ...,
    events: {
        render: function() {
            var title = this.title;
            title.attr({
                y: this.plotTop + this.plotHeight / 2 +
                    title.getBBox().height / 2 -
                    parseInt(title.styles.fontSize)
            });
        }
    }
},

实时演示： http://jsfiddle.net/BlackLabel/vnsp1ybz/

API参考：

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

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