文章/答案/技术大牛

发布

社区首页 >问答首页 >带画布的饼图.算法.错误结果

问带画布的饼图.算法.错误结果
EN

Stack Overflow用户

提问于 2022-02-24 17:35:18

回答 2查看 37关注 0票数 0

我编写了这个算法，它基于数组中的数据，使用画布元素生成饼图：

        function pieChart() {
            canvas = document.getElementById('pie-chart');
            canvas.width = 300;
            canvas.height = 300;
            context = canvas.getContext('2d');

            const data = [1, 5, 4, 3];
            const colors = ['brown', 'yellow', 'purple', 'pink'];

            let summ = 0;
            for (let index = 0; index < data.length; index++) {
                summ += data[index];
            }

            function deg(num) {
                return num / summ * 360;
            }

            function rad(deg) {
                return deg * (Math.PI / 180);
            }

            let start = 3 * Math.PI / 2;

            for (let index = 0; index < data.length; index++) {
                context.beginPath();
                context.moveTo(150, 150);
                context.arc(150, 150, 150, start, rad(deg(data[index])), false);
                context.lineTo(150, 150);
                context.fillStyle = colors[index];
                context.fill();
                start = rad(deg(data[index]));
            }
        }

<body onload="pieChart();">
    <canvas id="pie-chart"></canvas>
</body>

这是我得到的结果：

我做错了什么？

canvas

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-02-24 17:47:17

有两个值得注意的问题。

start = rad(deg(data[index]));

你正在移动你的开始角只是前一个楔形的大小，在现实中，你想要添加前一个楔形的大小。相反，这应该是：

start += rad(deg(data[index]));

context.arc(150, 150, 150, start, rad(deg(data[index])), false);

您在这里指定的末端角是楔形角的大小。相反，它需要与开始角相抵消(也就是说，您必须将开始角添加到其中)。相反，这应该是：

context.arc(150, 150, 150, start, start + rad(deg(data[index])), false);

function pieChart() {
  canvas = document.getElementById('pie-chart');
  canvas.width = 300;
  canvas.height = 300;
  context = canvas.getContext('2d');

  const data = [1, 5, 4, 3];
  const colors = ['brown', 'yellow', 'purple', 'pink'];

  let summ = 0;
  for (let index = 0; index < data.length; index++) {
    summ += data[index];
  }

  function deg(num) {
    return num / summ * 360;
  }

  function rad(deg) {
    return deg * (Math.PI / 180);
  }

  let start = 3 * Math.PI / 2;

  for (let index = 0; index < data.length; index++) {
    context.beginPath();
    context.moveTo(150, 150);
    context.arc(150, 150, 150, start, start + rad(deg(data[index])), false);
    context.lineTo(150, 150);
    context.fillStyle = colors[index];
    context.fill();
    start += rad(deg(data[index]));
  }
}

<body onload="pieChart();">
  <canvas id="pie-chart"></canvas>
</body>

票数 1

Stack Overflow用户

发布于 2022-02-24 18:01:40

从最后一个弧的角度到新弧线的角度，你画了每一个弧线，但都是从0开始的。您需要将新弧的角度添加到前面的结果中。

还要注意arc函数的最后一个参数。如果它是假的，那么弧是顺时针方向画的，如果它是真的，那么它是逆时针方向画的。

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

 document.addEventListener("DOMContentLoaded", function(){
 
 
            canvas = document.getElementById('pie-chart');
            canvas.width = 300;
            canvas.height = 300;
            context = canvas.getContext('2d');

            const data = [1, 5, 4, 3];
            const colors = ['brown', 'yellow', 'purple', 'pink'];

            let summ = 0;
            for (let index = 0; index < data.length; index++) {
                summ += data[index];
            }

            function deg(num) {
                return (num / summ) * 360;
            }

            function rad(deg) {
                return deg * (Math.PI / 180);
            }


            let lastAngle = 2 * Math.PI; //Starting angle
            let thisAngle = lastAngle;

            for (let index = 0; index < data.length; index++) {
                thisAngle += rad(deg(data[index]));
                context.beginPath();
                context.moveTo(150, 150);
                context.arc(150, 150, 150, lastAngle, thisAngle, false);
                context.lineTo(150, 150);
                context.fillStyle = colors[index];
                context.fill();
                lastAngle = thisAngle;
            }
            
           } );

<html>
<body>
  <canvas id="pie-chart">
  </canvas>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71256020

复制

相似问题

问带画布的饼图.算法.错误结果
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带画布的饼图.算法.错误结果EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带画布的饼图.算法.错误结果
EN