计算 SVG 饼图的百分比答案

【问题标题】：Calculating the percentage for a SVG pie chart计算 SVG 饼图的百分比
【发布时间】：2021-03-04 01:34:50
【问题描述】：

我知道那里有图表库，但我想亲自创建自己的自定义库。

我从another person 找到了一些工作，他从 javascript 中的数组创建了一个饼图，除了他是基于百分比的。

我一直在尝试修改它，以便它：

从数组中获取价值
除以数组中的总数
将该百分比用作面积

正如您在运行以下命令时所看到的，除非您预先计算了百分比，否则它不会根据数据形成一个完整的圆圈。

我的目标是将所有 percent: x 替换为 value: y，以便您可以使用原始值：

const slices = [
  { value: 1024 },
  { value: 5684 },
  { value: 125  },
];

let sum = slices.reduce(function (a, b) {
  return a + b.value
}, 0);

然后在循环中，您可以使用slice.value / sum 表示饼图的百分比。只是它似乎不像原来的百分比值那样工作。

// variables
const svgEl = document.querySelector('svg');
const slices = [
  { percent: 0.1, color: 'red' },
  { percent: 0.1, color: 'blue' },
  { percent: 0.1, color: 'green' },
];
let cumulativePercent = 0;

// coordinates
function getCoordinatesForPercent(percent) {
  const x = Math.cos(2 * Math.PI * percent);
  const y = Math.sin(2 * Math.PI * percent);
  return [x, y];
}

// loop
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);
});

svg {
  height: 200px;
}

&lt;svg viewBox="-1 -1 2 2" style="transform: rotate(-90deg);fill:black;"&gt;&lt;/svg&gt;

【问题讨论】：

你的问题到底是什么？
@MichaelRovinsky 而不是 percent: 0.1 我试图使用原始值 value: 1245 以便您从中获得百分比。我会更新问题以使其更清楚 - 我想我错过了其中的补充

标签： javascript html css svg

【解决方案1】：

您不必计算任何百分比（除非您想要百分比值）

让 SVG 与 pathLength 一起工作

使用切片值：blue:10、gold:20、red:30，即：pathLength="60"

你只需要计算stroke-dasharray差距（第二个值= 60 - value）
和stroke-dashoffset 累计值：10、30、60

更高级的用法在：https://pie-meister.github.io

<style>
  svg {
    width:180px;
  }
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path stroke-dasharray="10 50" stroke-dashoffset="10" stroke="blue" 
        pathLength="60" 
        stroke-width="50" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
        
  <path stroke-dasharray="20 40" stroke-dashoffset="30" stroke="gold" 
        pathLength="60" 
        stroke-width="50" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
        
  <path stroke-dasharray="30 30" stroke-dashoffset="60" stroke="red" 
        pathLength="60" 
        stroke-width="50" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0" fill="none"></path>
</svg>

【讨论】：

【解决方案2】：

const slices = [{color: 'red', value: 10}, {color: 'blue', value: 20}, {color: 'green', value: 30}];

const valueSum = slices.reduce((sum, slice) => sum + slice.value, 0);

const pctSlices = slices.map(slice => ({...slice, percent: slice.value / valueSum}));

pctSlices 数组将包含每个切片的百分比值

【讨论】：