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

Question

我通过thomas_rz编辑codepen.io

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

document.addEventListener("DOMContentLoaded", function() {
  var chart1 = new Highcharts.Chart({
    chart: {
      type: 'pie',
      renderTo: 'container'
    },
    title: {
      verticalAlign: 'middle',
      floating: true,
      text: 'CENTERED<br>TEXT'
    },
    plotOptions: {
      pie: {
        innerSize: '50%',
        dataLabels: {
          align: 'right',
          distance: 10,
          connectorWidth: 0
        }
      }
    },

    series: [{
      data: [
        ['Firefox', 44.2],
        ['IE7', 26.6],
        ['IE6', 20],
        ['Chrome', 3.1],
        ['Other', 5.4]
      ]
    }]
  });
});

并返回此图表。

但我需要这个图表，文本对齐馅饼的中间位置

Answer 1

数据标签对齐说明：

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

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

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

没有先进的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