javascript画布:使用曲线绘制移动平均线

// 创建画布
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 获取画布上下文
var ctx = canvas.getContext('2d');

// 定义数据
var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

// 计算移动平均线数据
var period = 3; // 移动平均线的时间段
var movingAverageData = [];
for (var i = period - 1; i < data.length; i++) {
  var sum = 0;
  for (var j = i; j > i - period; j--) {
    sum += data[j];
  }
  movingAverageData.push(sum / period);
}

// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.stroke();

// 绘制数据点
ctx.beginPath();
for (var i = 0; i < data.length; i++) {
  ctx.arc(50 + i * 20, 250 - data[i], 3, 0, 2 * Math.PI);
}
ctx.fill();

// 绘制移动平均线
ctx.beginPath();
ctx.moveTo(50, 250 - movingAverageData[0]);
for (var i = 1; i < movingAverageData.length; i++) {
  ctx.lineTo(50 + i * 20, 250 - movingAverageData[i]);
}
ctx.stroke();