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

我编辑了thomas_rz的codepen.io

document.addEventListener（“DOMContentLoaded”，function（））{
var chart1=新的高点图表。图表({
图表：{
键入“pie”，
renderTo:“容器”
},
标题：{
垂直排列：'中间'，
浮动：是的，
文本：“居中
文本”
},
打印选项：{
馅饼：{
内部尺寸：“50%”，
数据标签：{
对齐：“右”，
距离：10，
连接器宽度：0
}
}
},
系列：[{
数据：[
['Firefox'，44.2]，
[IE7'，26.6]，
[IE6'，20]，
[Chrome'，3.1]，
[“其他”，5.4]
]
}]
});
});

并返回此图表

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

---

计算中的高度图表不考虑带有

标记的正确标题高度。您可以在

渲染

事件中计算标题的正确位置：

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

现场演示：

API参考：

---

计算中的高度图表不考虑带有

标记的正确标题高度。您可以在

渲染

事件中计算标题的正确位置：

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

现场演示：

API参考：

---

数据标签对齐说明：

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

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

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

如果没有高级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);

现场演示：

---

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

数据标签对齐说明：

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

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

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

如果没有高级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);

现场演示：

---

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

非常感谢您的帮助，但是“Chrome”和“others”仍然未对齐（偏离切片轴）。非常感谢您的帮助，但是“Chrome”和“others”仍然未对齐（偏离切片轴）。