尝试计算在 svg 和 javascript 中创建的饼图切片的角度

Question

我正在通过 javascript 和 svg 创建动态饼图切片。我需要切片的两边都有边框。我无法计算出在两个边界上执行此操作的数学方法（我可以在起始边界上得到它，但不能在切片的最终结束边界上得到它。

let size = 200
let slicePercentage = 33
let radius = size / 2
let circumference = Math.PI * radius * 2
let slice = ((slicePercentage / 2) * circumference) / 100 + ' ' + circumference

let line = ((size / 2) + radius) * Math.cos(slicePercentage)

我在此处包含代码以显示： https://jsfiddle.net/yg210erv/1/

Answer 1

我已经分叉 fiddle 来回答你的问题 here，但你可能还想检查一下你想要完成的事情的几何结构。基本上，您将 size 作为第二行的 y 坐标，这是没有意义的。我为 line2 的 x 和 y 坐标设置了两个变量 linex 和 liney。表达式非常简单：

let finalAngle = 2 * Math.PI * (slicePercentage/100)
let linex = radius + (radius * Math.cos(finalAngle))
let liney = radius + (radius * Math.sin(finalAngle))

你也可以这样写：

let linex = radius * (1 + Math.cos(finalAngle))

但这只有在您要总是创建在size/2处具有相同中心的切片时才有效。

尝试计算在 svg 和 javascript 中创建的饼图切片的角度

Trying to calculate angle of a pie chart slice created in svg and javascript

javascript

math

svg

pie-chart