You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
const svgEl = document.querySelector("svg");
|
|
const slices = [
|
|
{ percent: 0.1, color: "Coral" },
|
|
{ percent: 0.65, color: "CornflowerBlue" },
|
|
{ percent: 0.2, color: "#00ab6b" },
|
|
];
|
|
let cumulativePercent = 0;
|
|
|
|
function getCoordinatesForPercent(percent) {
|
|
const x = Math.cos(2 * Math.PI * percent);
|
|
const y = Math.sin(2 * Math.PI * percent);
|
|
return [x, y];
|
|
}
|
|
|
|
slices.forEach((slice) => {
|
|
// destructuring assignment sets the two variables at once
|
|
const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
|
|
|
|
// each slice starts where the last slice ended, so keep a cumulative percent
|
|
cumulativePercent += slice.percent;
|
|
|
|
const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
|
|
|
|
// if the slice is more than 50%, take the large arc (the long way around)
|
|
const largeArcFlag = slice.percent > 0.5 ? 1 : 0;
|
|
|
|
// create an array and join it just for code readability
|
|
const pathData = [
|
|
`M ${startX} ${startY}`, // Move
|
|
`A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
|
|
`L 0 0`, // Line
|
|
].join(" ");
|
|
|
|
// create a <path> and append it to the <svg> element
|
|
const pathEl = document.createElementNS(
|
|
"http://www.w3.org/2000/svg",
|
|
"path"
|
|
);
|
|
pathEl.setAttribute("d", pathData);
|
|
pathEl.setAttribute("fill", slice.color);
|
|
svgEl.appendChild(pathEl);
|
|
});
|