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. Я не ищу, чтобы кто-то написал код для меня, однако хороший учебник или руководство было бы очень оценено.

источник

2017-01-28 SPlatten

Вы хотите найти, как выполнить регресс? Или как рисовать кривую? – kennytm

@kennytm, если честно, я не уверен, все, что я могу вам сказать, это то, что на данный момент я рисую полилинию, которая является результатом содержимого массива, и я хотел бы отображать те же данные, что и кривая. – SPlatten

Вы хотите нарисовать что-то вроде этого? https://i.stack.imgur.com/ZIljM.png Какую библиотеку вы используете для рисования полилинии? – kennytm

Возможно, вас заинтересует genetic-js. Цитирую со страницы проекта:

С участка вершин, этот генетический алгоритм оптимизирует Continious функцию, чтобы наилучшим образом соответствует данных (иначе мере квадрат ошибок). Genetic.js автоматически запускает алгоритм в фоновом режиме с веб-рабочими, поэтому , что опыт пользовательского интерфейса не скомпрометирован.

Подробный пример here.

источник

2017-01-28 19:22:29 lorefnon

Я пытаюсь понять, как адаптировать этот код или мои вершины для использования скриптом .... мой массив содержит массив точек X, Y, но я не могу понять, как организовать данные, чтобы он обрабатывается правильно. – SPlatten

-1

An холст 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 массив точек, как кривой подходят?

ответ

Смежные вопросы