如何在饼图切片内定位标签[关闭]

Question

我正在创建一个饼图，但偶然发现了一个问题：
如何在切片中放置切片标签？

我希望标签位于切片的中间并完全适合切片。

目前我正在通过center.y - sliceStartPoint.y / 2 和sliceStartPoint.x + 10 计算标签的位置
但效果不佳。

如何有效地计算标签边界？
该计算应该适用于任何切片，无论是宽的还是薄的。

Answer 1

嗯，在饼图中，您很可能希望将标签放在中间。

在圈子的哪个位置不是什么大问题：
所以如果你的切片是从0.1[rad] 到0.3[rad] 那么你应该把它放在平均半径(0.1[rad] + 0.3[rad])/2 = 0.2[rad] 半径上。

棘手的部分是沿半径的位置：
你的三角形是“等腰”，所以从它的顶部给定高度，它的多边形之间的宽度很容易确定，
tg(alpha/2) = (w/2) / h
h = w/2 / tg(alpha / 2)

= 编辑开始 =

辅助构建：高度到中间
构建辅助：线AB 平行于三角形基础

1. OMB = 90 = 1/4rad（三角形的高度）
2. AM = BM（等腰）
3. MOB = Aplha / 2（等腰）
4. tg(MOB) = MB/OM
   tg(alpha/2)= (w/2) / h
   h tg(alpha/2) = w/2
   2h tg(alpha/2) = w

tg(a) 是 tan(a) 的数学简写。
这是一个三角函数(easy explanation of Sin, Cos & Tan here)

JS has Tan() built in (see this link)

= 编辑结束 =

因此确定标签所需的宽度（w），并计算h

如果h 大于您的 PIE-Chart 半径，则您将标签放置在图表之外，您应该考虑使用恒定的 R 来获得漂亮的线条。

干杯。

-- 编辑 2-- 请注意，有两件事需要考虑：

1. 当您的切片大于pi[rad] = 180 度时，上述计算将失败，但在这种情况下，标签应该很适合。

2. 你应该指定你想要你的标签的半径到中心的最小距离，如果h更小，那么就使用最小值。 （我会说 0.7r 是一个不错的值，但要使其可配置。