所以基本上,我想在時間序列折線圖的一定數量的點上畫曲線平均線。就像這樣:javascript canvas:用曲線繪製移動平均線
我希望它跨越圖表的整個長度,但我無法弄清楚如何計算的起點和終點,因爲平均會(我認爲)是一個點每個部分的中間。看着股票圖表與移動平均線,你可以看到我想要什麼acheive:
我通過拆分數據陣列成基於一段時間塊先計算平均值。所以,如果我開始:
[
{ 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();
你會怎麼做到這一點?