ポイントのJavascript配列カーブフィットする方法？

私は点の配列を持ち、各点はxとyで構成され、xはタイムスタンプであり、yは実際のデータです。ポイントのJavascript配列カーブフィットする方法？

私はJavascriptで時系列プロットを作成しました。データをカーブフィットして曲線を描きたいと思います。

これを達成する手助けができますか？ポイントの

マイリスト：

{fltX: 0, fltY: 55.932203389830505} 
    {fltX: 1.8237082066869301, fltY: 55.932203389830505} 
    {fltX: 3.6474164133738602, fltY: 55.932203389830505} 
    {fltX: 5.47112462006079, fltY: 55.932203389830505} 
    {fltX: 7.2948328267477205, fltY: 81.35593220338983}

X座標は、すでにX軸にスケーリングされています。私はコードを書く人を探しているわけではありませんが、良いチュートリアルやガイドは非常に高く評価されます。

出典

2017-01-28 SPlatten

あなたが回帰を実行する方法を見つけたいですか？または曲線を描く方法？ – kennytm

@kennytm、正直言って、わかりませんが、私があなたに伝えることは、現時点では、配列の内容の結果であるポリラインを描き、同じデータを表示したいと思います。曲線。 – SPlatten

このようなものを描きたいですか？ https://i.stack.imgur.com/ZIljM.pngポリラインを描くためにどのライブラリを使用していますか？ – kennytm

genetic-jsに興味があるかもしれません。プロジェクトページから引用すると：頂点のプロットから

、この遺伝的アルゴリズムは、最良のデータを合わせてcontinious 機能（別名、最小二乗誤差）を最適化します。 Genetic.js は、ウェブワーカーとのバックグラウンドで自動的にアルゴリズムを実行します。したがって、は、UIエクスペリエンスが損なわれていないことを示します。

具体的な例はhereです。あなたの必要性に取り組むこと

出典

2017-01-28 19:22:29 lorefnon

私はこのコードまたは私の頂点をスクリプトで使用する方法を理解しようとしています....私の配列にはX、Yポイントの配列が含まれていますが、データを整理する方法それは正しく処理されます。 – SPlatten

-1

HTML5のキャンバス：

Javascriptを：

var hpms = {}; 

hpms.Graph = function(canvasId) { 
    this.MARGIN = 30; 
    this.canvas = document.getElementById(canvasId); 
    this.ctx  = this.canvas.getContext("2d"); 
    this.offsetY = this.canvas.height - this.MARGIN; 
}; 

hpms.Graph.prototype.drawAxis = function(canvas) { 
    this.ctx.beginPath(); 
    this.ctx.moveTo(0    , this.offsetY); 
    this.ctx.lineTo(this.canvas.width, this.offsetY); 
    this.ctx.moveTo(this.MARGIN, this.canvas.height); 
    this.ctx.lineTo(this.MARGIN, 0); 

    var dx  = (this.canvas.width - 2*this.MARGIN)/3; 
    var yText = this.offsetY + 3*this.MARGIN/4; 

    var x  = this.MARGIN + dx; 
    var legend = "1 year"; 
    this.ctx.moveTo(x, 0); 
    this.ctx.lineTo(x, this.offsetY + this.MARGIN/2); 
    x -= this.ctx.measureText(legend).width/2; 
    this.ctx.strokeText(legend, x, yText); 

    x = this.MARGIN + 2*dx; 
    this.ctx.moveTo(x, 0); 
    this.ctx.lineTo(x, this.offsetY + this.MARGIN/2); 
    legend = "2 years"; 
    x -= this.ctx.measureText(legend).width/2; 
    this.ctx.strokeText(legend, x, yText); 

    x = this.MARGIN + 3*dx; 
    this.ctx.moveTo(x, 0); 
    this.ctx.lineTo(x, this.offsetY + this.MARGIN/2); 
    legend = "3 years"; 
    x -= this.ctx.measureText(legend).width/2; 
    this.ctx.strokeText(legend, x, yText); 

    var dy = 4; 
    for(var y = 0; y < this.offsetY; y += 100) { 
     this.ctx.moveTo(this.MARGIN/2 , this.offsetY - y); 
     this.ctx.lineTo(this.canvas.width, this.offsetY - y); 
     legend = "" + y; 
     this.ctx.strokeText(legend, 0, this.offsetY - y + dy); 
    } 

    this.ctx.closePath(); 
    this.ctx.lineCap  = "round"; 
    this.ctx.lineWidth = 1; 
    this.ctx.strokeStyle = "lightgray"; 
    this.ctx.stroke(); 
}; 

hpms.Graph.prototype.drawLinear = function(fn, color) { 
    this.ctx.beginPath(); 
    this.ctx.strokeStyle = color; 
    this.ctx.lineWidth = 5; 
    this.ctx.moveTo(this.MARGIN, this.offsetY - fn.b); 
    var x = this.canvas.width - 2*this.MARGIN; 
    var y = fn.a*x + fn.b; 
    this.ctx.lineTo(this.MARGIN + x, this.offsetY - y); 
    this.ctx.closePath(); 
    this.ctx.stroke(); 
} 

function draw() { 
    var g = new hpms.Graph("canvas"); 
    g.drawAxis (); 
    g.drawLinear({a:0.25, b:200}, "darkgray"); 
    g.drawLinear({a:0.80, b: 30}, "rgb(16,65,96)"); 
}

HTML：

<!doctype html> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Canvas</title> 
    <script type="text/javascript" src="canvas.js"></script> 
</head> 
<body> 
    <canvas id="canvas" width="1000" height="400"></canvas> 
    <script type="text/javascript"> 
     draw(); 
    </script> 
</body> 
</html>

出典

2017-01-28 19:31:10 Aubin

ありがとうございます、私はJavascriptとHTML 5に非常に精通していますが、すでにポイントを含む2Dグラフを描いていますが、欲しいのは、鋸歯ではなくポイントの曲線を描くことです。 – SPlatten

ポイントのJavascript配列カーブフィットする方法？

答えて

関連する問題