Возникли проблемы при рисовании прогрессивной линии от координаты до координаты на холсте

Question

Чрезвычайно новый для javascript, и это мой первый проект! Я строю линейный график с использованием Html Canvas и Javascript. У меня есть функция, которая генерирует случайные числа для координат X и Y, которая затем заполняет пустой массив. Я хочу построить точки и соединить их при заполнении массива. Конечной целью является построение линейного графика, который масштабируется в зависимости от точек. Я знаю, что код немного запутан (я извиняюсь), и есть другие проблемы, но проблема, на которой я сейчас остановлюсь, состоит в том, что когда код выполняется, он отображает точку A, затем AB, затем ABC, затем ABCD и т. Д. Хотелось бы, чтобы он строил точки постепенно, поэтому это точка A, затем точка B, затем точка C и т. д. построчно Надеюсь, что это имеет смысл!

Из того, что я видел от других, похоже, что лучший способ сделать это - сослаться на предыдущую точку в массиве и убедиться, что линия от этой предыдущей точки. Я думал, что это то, что я делаю здесь или, по крайней мере, пытаюсь сделать.

// Return the x pixel for a graph point
function getXPixel(val) {
    return ((canvas.width - xMarg) / plotArray.length) * val + (xMarg);
}

// Return the y pixel for a graph point
function getYPixel(val) {
    return canvas.height - (((canvas.height - yMarg) / getMaxY()) * val) - yMarg;
}

function plotPoints() {
    ctx.strokeStyle = '#f00';
    ctx.beginPath();
    ctx.moveTo(getXPixel(0), getYPixel(plotArray[0].Y));
    for (var i = 1; i < plotArray.length; i++) {
    ctx.lineTo(getXPixel(i), getYPixel(plotArray[i].Y));
    }
    ctx.stroke();
    label();
    drawCircle();

}


function drawCircle() {
    ctx.fillStyle = '#333';
    for (var i = 0; i < plotArray.length; i++) {
        ctx.beginPath();
        ctx.arc(getXPixel(i), getYPixel(plotArray[i].Y), 4, 0, Math.PI * 2, true);
        ctx.fill();
    }
}

function setPlotHistory(){
    var plotHistory = plotArray.length
    plotArray[plotHistory.res] = {};
    plotArray[plotHistory.moveToX] = plotArray.X;
    plotArray[plotHistory.moveToY] = plotArray.Y;
}


runTest = setInterval(function() {
    var res = { //Create object of results with each test
        X: testsRun,
        Y: getRandomNumber(10,150)
    };
    if (plotArray.length === 5) {
        plotArray.shift();
    }
    plotArray.push(res); //put the result in the array
setPlotHistory(res);
    document.getElementById('output').innerHTML = "Tests Run: " + testsRun;
    testsRun++; //up the number of tests by one 
    plotPoints();

},testInt);

Не уверен, сколько информации я должен был предоставить и не хотел заполнять страницу полным кодом, поэтому для справки вы можете увидеть мой полный код здесь https://jsfiddle.net/Crashwin/72vd1osL/3/

Любая помощь приветствуется!

Answer 1

Если я правильно понимаю желаемые результаты ... Вы должны очищать холст и перерисовывать при каждом вызове. Это потребует перерисовки оси. Возможно, вы захотите сделать начальную отрисовку, чтобы настроить график перед запуском первого таймера.

Модифицированная функция plotPoints:

//Draw the line graph
function plotPoints() {
  // clear the canvas for each draw. 
  ctx.clearRect(0,0,canvas.width,canvas.height);

  // put the axis back.
  drawAxis();

  // draw all points and lines.
  ctx.strokeStyle = '#f00';
  ctx.beginPath();
  ctx.moveTo(getXPixel(0), getYPixel(plotArray[0].Y));
  for (var i = 1; i < plotArray.length; i++) {
    ctx.lineTo(getXPixel(i), getYPixel(plotArray[i].Y));
  }
  ctx.stroke();
  label();
  drawCircle();
}

Вы должны оставить plotArray как есть (не удаляйте точки), чтобы он стал вашей историей графика. Нет необходимости для setPlotHistory ().

Также в функции drawAxis вы должны установить штрих-стиль, иначе он будет в стиле, определенном в plotPoints, т.е. # f00.

Модифицированная функция drawAxis:

function drawAxis() {
  // set axis stroke style
  ctx.strokeStyle = "#333";
  ctx.beginPath(); //new line
  ctx.moveTo(xMarg, 10); //move to (40, 10)
  ctx.lineTo(xMarg, canvas.height - yMarg); // line to (40, height - 40)
  ctx.lineTo(canvas.width, canvas.height - yMarg); // line to (width, height - 40)
  ctx.stroke(); //draw lines
}

Рабочий пример здесь: https://jsfiddle.net/8yw5mouz/1/

Ps. Это довольно хороший код. Мне нравится, как он масштабируется.