如何在饼图切片内定位标签

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]半径范围内。

棘手的部分是沿着半径的地方：
你的三角形是等腰＆＃39;因此从它的TOP高度来看，它的多边形之间的宽度很容易确定，
tg(alpha/2) = (w/2) / h
h = w/2 / tg(alpha / 2)

=编辑开始=

建筑援助：中间高度
Build Aid：与{Triangle Base>平行的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是一个很好的价值，但可以配置。