如何在指向饼图的饼图中动态对齐图例

Question

我是Highcharts的新手，在处理Highcharts时有几个问题。

1. 饼图数据标签中的图例应正好位于切片的中心
2. 百分比值应围绕饼图中的图例流动

From the example:
1.Percentage value residing next to the triangle
2.Percentage value is below the square.
3.Percentage value is above the diamond.

Codepen

注意：请忽略代码笔中的形状。

[！[在此处输入图像描述][2]][2]

请随时回答任何问题。

Answer 1

我认为这个演示是实现这些功能的良好开端。请分析一下。

演示：https://jsfiddle.net/BlackLabel/a23ckv8n/

events: {
load() {
let chart = this;
chart.series[0].points.forEach(p => {
const DL = p.dataLabel;
if (p.half) {
const x = DL.translateX + chart.plotLeft + DL.getBBox().width;
const y = DL.translateY + chart.plotTop + DL.getBBox().height;
chart.renderer.circle(x, y, 5).attr({
fill: p.color,
}).add();
} else {
const x = DL.translateX + chart.plotLeft;
const y = DL.translateY + chart.plotTop;
chart.renderer.circle(x, y, 5).attr({
fill: p.color,
}).add();
}
})
}
}

API：https://api.highcharts.com/highcharts/chart.events.load

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle