获取相对于饼图的鼠标位置（等式）

Question

我已经从一组数据创建了一个画布饼图，我现在正试图找到相对于饼图的鼠标位置，以检测哪些数据部分正在悬停。我几乎在那里，但我被困在一个等式。

我的逻辑运作正常，所以我认为这更像是一个数学问题，但会看到其他人对我的方法的看法。这是我的饼图和我正在使用的变量：

图像上列出的变量是我必须使用的变量（mouseX，mouseY，距离中心的距离，半径，pi的环绕度以及圆周上相对于pi的数据部分）。 / p>

图表的起始部分是从右边开始，从pi * 2的0开始到pi * 2的100％，灰色部分的起始位置为1.34 ...相对于饼* 2和结束2.228的位置......

我目前的主要问题是使用像素测量来计算它相对于pi的位置。我可以从上到左检查位置，然后计算出距离中心的距离，并根据pi计算出从中心开始的线，但是我很难计算出来。

Answer 1

最难记住的部分是Y坐标在DOM坐标中向下运行 ，因此角度从正X轴顺时针顺时针：

给定鼠标位置mx, my：

var dx = mx - 180;               // horizontal offset from center
var dy = my - 180;               // vertical offset from center

var theta = Math.atan2(dy, dx);  // angle clockwise from X-axis, range -π .. π
if (theta < 0) {                 // correct to range 0 .. 2π if desired
    theta += 2.0 * Math.PI;
}