0

我正在尝试使用 vanilla 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 方法时会得到不同的结果。

4

1 回答 1

0

我认为它在原生 Js Quick 解决方案中的 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 美分

于 2019-07-19T11:43:01.620 回答