Javascript点数组如何进行曲线拟合？

我有一个点数组，每个点由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轴。我不想找人帮我写代码，但是如果有好的教程或指南，我将不胜感激。

您可能会感兴趣。要引用项目页面中的内容：

从顶点图中，该遗传算法优化了连续的 函数以最佳拟合数据（也称为最小平方误差）。Genetic.js 在后台与web workers一起自动运行算法，以便 用户界面体验不会受到影响

---

这里有一个详细的例子。

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)");
}

var hpms={}；
hpms.Graph=函数（canvasId）{
这1.5%的保证金=30；
this.canvas=document.getElementById（canvasId）；
this.ctx=this.canvas.getContext（“2d”）；
this.offsetY=this.canvas.height-this.MARGIN；
};
hpms.Graph.prototype.drawAxis=函数（画布）{
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=此.MARGIN+dx；
var legend=“1年”；
这个.ctx.moveTo（x，0）；
this.ctx.lineTo（x，this.offsetY+this.MARGIN/2）；
x-=此.ctx.measureText（图例）.width/2；
this.ctx.strokeText（图例，x，yText）；
x=此。边距+2*dx；
这个.ctx.moveTo（x，0）；
this.ctx.lineTo（x，this.offsetY+this.MARGIN/2）；
图例=“2年”；
x-=此.ctx.measureText（图例）.width/2；
this.ctx.strokeText（图例，x，yText）；
x=此。边距+3*dx；
这个.ctx.moveTo（x，0）；
this.ctx.lineTo（x，this.offsetY+this.MARGIN/2）；
图例=“3年”；
x-=此.ctx.measureText（图例）.width/2；
this.ctx.strokeText（图例，x，yText）；
var-dy=4；
对于（变量y=0；y

HTML:

帆布
draw（）；

您想知道如何执行回归吗？或者如何绘制曲线？@kennytm，老实说，我不确定，我能告诉你的是，目前，我绘制的多边形线是数组内容的结果，我想显示与曲线相同的数据。你想画这样的东西吗？你使用哪个库来绘制多边形线？@kennytm，是的，就像那样，我没有使用任何库，只是使用moveTo和lineTo在画布上绘制。在这种情况下，如果你是为一个产品做这件事，我建议你只使用哪个句柄来为你绘制一个图形。谢谢你，我非常熟悉Javascript和HTML 5，我已经绘制了一个包含点的2D图形，但我想要的是绘制一条点的曲线，不是锯齿形。我正在试图找出如何调整此代码或顶点以供脚本使用……我的数组包含一个X、Y点数组，但我不太清楚如何组织数据以便正确处理。

<!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>