饼图切片 - 质量中心

时间:2018-05-29 22:09:37

标签: javascript math highcharts pie-chart

使用Highcharts,我试图将矩形元素放置在"质心中心"饼图切片。

我有用于找到切片中心的公式/算法:

shapeArgs = Chart.series[0].points[sliceIndex].shapeArgs,
ang       = (shapeArgs.end - shapeArgs.start) / 2 + shapeArgs.start,
posX      = cX + shapeArgs.r/2 * Math.cos(ang),
posY      = cY + shapeArgs.r/2 * Math.sin(ang)

这基于开始&找到切片的中心。结束角度和图表的半径 - 由下图中的黑色圆圈表示。我想要的是找到适合切片的最大矩形的中心的某种方式 - 由下面的绿色圆圈表示(我只是眼睛盯着它)。我的理由是,位于切片质心上方的元素在切片中的位置比位于精确中心的位置更好。 [![在此处输入图像说明] [1]] [1]

我的基本修正是减少半径减小的因素:

posX = cX + shapeArgs.r/1.3 * Math.cos(ang)

这似乎运作得相当好,但我想知道是否有更好的方法。有谁知道这个数学?

修改

调整因子的结果的屏幕截图:https://i.stack.imgur.com/FBH5p.png
做维基百科数学结果的屏幕截图: https://i.stack.imgur.com/DlGcS.png

1 个答案:

答案 0 :(得分:0)

根据Wikipedia,圆形扇区的质心距离中心的距离是(2r * sin(a))/(3 * a)。我会发现posXposY是这样的:

var dist = (2 * shapeArgs.r * Math.sin(ang)) / (3 * ang);
posX = cX + dist * Math.cos(ang);
posY = cY + dist * Math.sin(ang);