Question

我有一个点数组，每个点由x和y组成，x是时间戳，y是实际数据。

我在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轴。我不是在找人为我编写代码，但是非常感谢一个好的教程或指南。

Answer 1

您可能对genetic-js感兴趣。引用项目页面：

从顶点图中，这种遗传算法优化了连续性功能最适合数据（即最小平方误差）。 Genetic.js 在Web应用程序的后台自动运行算法 UI体验并没有受到损害。

有一个精心制作的例子here。

Answer 2

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>

Javascript数组如何曲线拟合？

2 个答案: