Question

我试图通过循环图进行数据可视化。数据被从我的数据库中拉出并进入关联数组。在这种情况下，对象键是地址，值是数字（我的数据库中存在多少次）。这是我的代码的简短版本：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var s = 0;

//var t = total sum of values
var l = Object.keys(arr);
for (var i=0;i<l.length;i++){
    var e = Object.values(arr)[i]/t;
    var perc = 2*Math.PI*e;

    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, canvas.height / 2);
    ctx.arc(canvas.width/2,canvas.height/2,canvas.height/2,s,s + perc,false);
    ctx.lineTo(canvas.width/2,canvas.height/2);
    ctx.stroke();
    s += perc;
}

这是目前的结果：

picture

正如你所看到的那样，它不是一个圆圈，因为它应该是。我希望有人可以帮助我。

更新

所以最奇怪的事情发生了。显然，css设置的画布上的高度和宽度与javascript设置的高度和宽度之间存在差异。我刚刚在javascript中给了我的画布canvas.width = 400和canvas.height = 400并删除了我的css height = 400px和width = 400px。这个圈子突然之间应该是这样的。非常非常奇怪。

Javascript - 根据可变数据输入绘制圆圈

0 个答案: