Question

我正在尝试使用香草JavaScript从数据集中绘制画布饼图“切片”。这个想法是使用forEach方法遍历每个数据值属性来获取每个切片的“ startAngle”和“ endAngle”。

当我使用常规的for循环遍历数据时，这些切片会很好地绘制。但是，当我采用相同的代码并对数据使用forEach方法时，不会绘制切片。

我的饼图的完整示例和正在处理的问题可以在以下JS小提琴中找到：https://jsfiddle.net/JonDWesley/okvbgau6/328/

这是用于遍历我的数据并绘制饼图“切片”的代码：

let sliceStartAngle = 0;
for (var n = 0; n < this.data.length; n++) {
    var property = this.data[n];
    let sliceAngle = 2 * Math.PI * property.value / totalValue;
    let sliceEndAngle = sliceStartAngle + sliceAngle;
    context.beginPath();
    context.moveTo(this.pieLocationX, this.pieLocationY);
    context.arc(this.pieLocationX, this.pieLocationY, this.pieRadius, 
    sliceStartAngle, sliceEndAngle, false);
    context.fill();
    context.stroke();
    context.closePath();
    sliceStartAngle = sliceEndAngle
}

在第二个示例中，我的代码几乎相同，除了我使用的是forEach方法而不是for循环：

let sliceStartAngle = 0;
data.forEach(function(property) {
    let sliceAngle = 2 * Math.PI * property.value / totalValue;
    let sliceEndAngle = sliceStartAngle + sliceAngle;
    context.beginPath();
    context.moveTo(this.pieLocationX, this.pieLocationY);
    context.arc(this.pieLocationX, this.pieLocationY, this.pieRadius, 
    sliceStartAngle, sliceEndAngle, false);
    context.fill();
    context.closePath();
    sliceStartAngle += sliceEndAngle
});

我希望forEach方法像for那样遍历我的数据数组。但是，我想知道为什么在画布上绘画时，使用forEach方法会得到不同的结果。

Answer 1

我认为它是本机Js中forEach中的“ this”作用域为您提供快速解决方案是：

let _this = this;
let sliceStartAngle = 0;
data.forEach(function(property) {
  let sliceAngle = 2 * Math.PI * property.value / totalValue;
  let sliceEndAngle = sliceStartAngle + sliceAngle;
  context.beginPath();
  context.moveTo(_this.pieLocationX, _this.pieLocationY);
  context.arc(_this.pieLocationX, _this.pieLocationY, _this.pieRadius, 
  sliceStartAngle, sliceEndAngle, false);
  context.fill();
  context.closePath();
  sliceStartAngle += sliceEndAngle
});

或使用ES6

let sliceStartAngle = 0;
data.forEach((property) => {
  let sliceAngle = 2 * Math.PI * property.value / totalValue;
  let sliceEndAngle = sliceStartAngle + sliceAngle;
  context.beginPath();
  context.moveTo(this.pieLocationX, this.pieLocationY);
  context.arc(this.pieLocationX, this.pieLocationY, _this.pieRadius, 
  sliceStartAngle, sliceEndAngle, false);
  context.fill();
  context.closePath();
  sliceStartAngle += sliceEndAngle
});

一些额外的信息，for-next循环不会限制变量的范围，forEach正在处理回调（什么是函数），然后“ this”就是函数的范围

我为此支付2美分

使用forEach

1 个答案: