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

所以基本上，我想画一条曲线平均线，在时间序列折线图的一定数量的点上。像这样：

<>我希望它能跨越图表的整个长度，但是我无法计算如何计算起点和终点，因为平均值（我想）是每个区段中间的一个点。通过移动平均线查看股票图表，您可以看到我想要实现的目标：

我首先根据一段时间将数据数组分割成块来计算平均值。因此，如果我从以下几点开始：

[
    { time: 1, value: 2 }, 
    { time: 2, value: 4 },
    { time: 3, value: 5 },
    { time: 4, value: 7 },
]

我可以：

var averages = [
   {
      x: 1.5,
      y: 3,
   },
   {
       x: 3.5  (the average time)
       y: 6    (the average value)
   },
]

这是我尝试过的，我最终得到了一条不完整的线，这条线不是从图表的开头开始，也不是在图表的结尾结束，而是在第一个平均时间在图表中开始和结束：

            ctx.moveTo((averages[0].x), averages[0].y);

            for(var i = 0; i < averages.length-1; i ++)
            {

              var x_mid = (averages[i].x + averages[i+1].x) / 2;
              var y_mid = (averages[i].y + averages[i+1].y) / 2;
              var cp_x1 = (x_mid + averages[i].x) / 2;
              var cp_x2 = (x_mid + averages[i+1].x) / 2;
              ctx.quadraticCurveTo(cp_x1, averages[i].y ,x_mid, y_mid);
              ctx.quadraticCurveTo(cp_x2, averages[i+1].y ,averages[i+1].x, averages[i+1].y);
            }

            ctx.stroke();

ctx.moveTo（（平均值[0].x），平均值[0].y）；
对于（变量i=0；i

---

您将如何做到这一点？

要获得移动平均值，您只需获得当前样本两侧n个点的平均值

比如说

// array of data points 
const movingMean = []; // the resulting means
const data = [12,345,123,53,134,...,219]; // data with index representing x axis
const sampleSize = 5;
for(var i = sampleSize; i < data.length - sampleSize; i++){
    var total = 0;
    for(var j = i- sampleSize; j < i + sampleSize;  j++){
         total += data[j];
    }
    movingMean[i] = total / (sampleSize * 2);
}

移动平均数
加权平均数
宽加权平均数
单击查看另一个示例

，我只是想说这是一个例外的答案，真的超出了职责范围。

for(var i = sampleSize; i < data.length + Math.floor(sampleSize / 4); i++){
    var total = 0;
    var count = 0;
    for(var j = sampleSize; j > 0; j --){
        var index = i - (sampleSize - j);
        if(index < data.length){
             total += data[index] * j; // linear weighting
            count += j; 
        }
    }
    movingMean[i-Math.floor(sampleSize / 4)] = total / count;
}