Javascript array of points how to curve fit?

问题

I have an array of points, each point consists of a x and y, the x is a timestamp, y is the actual data.

I have created a time series plot in Javascript and I would like to curve fit the data and draw the curve.

Can anyone help me to achieve this?

My list of points:

    {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}

The X co-ordinates have already been scaled to the X axis. I'm not looking for someone to write the code for me, however a good tutorial or guide would be very much appreciated.

回答1:

You may be interested in genetic-js. To quote from the project page:

From a plot of vertices, this genetic algorithm optimizes a continious function to best fit the data (aka least squared error). Genetic.js automatically runs the algorithm in the background with web workers so that the UI experience isn't compromised.

An elaborate example is available here.

回答2:

An HTML5 canvas may tackle your need:

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>

来源：https://stackoverflow.com/questions/41913723/javascript-array-of-points-how-to-curve-fit

标签

javascript

curve-fitting