如何在饼图切片内放置标签

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] 半径放置。

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

=编辑开始=

Build Aid：高度到中间
构建辅助：线 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) 的数学 shorthand。
这是一个三角函数 (easy explanation of Sin, Cos & Tan here)

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

=编辑结束=

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

如果 h 大于您的 PIE 图表半径，则您将标签放在图表之外，您应该考虑一个常数 R 以使其具有漂亮的线条。

干杯。

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

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

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