时间戳

首页 > 解决方案 > 尝试计算在 svg 和 javascript 中创建的饼图切片的角度

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

问题描述

我正在通过 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/

标签： javascriptmathsvgpie-chart

解决方案

我在这里分叉了小提琴来回答你的问题，但你可能还想检查你想要完成的几何形状。基本上，您将size其作为y第二行的坐标，这没有任何意义。我设置了两个变量，linex对于liney和x的y坐标line2。表达式非常简单：

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。

推荐阅读