Я пытаюсь нарисовать «кусочки» круговой диаграммы холста из набора данных с помощью ванильного 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.
