Javascript Canvas 问题 : Why do my points on the canvas not correspond properly to the height of the graph?

Question

我正在尝试使用看起来像典型折线图的 Canvas 制作折线图，并使用我们在代数中学到的典型笛卡尔坐标；左下角0,0开始，x轴位置由要绘制的项目数决定。

但是，点的位置与输入不匹配(虽然图形的形状是正确的，表明我做对了)。我做错了什么？

我已经多次重写和调整转换公式

function newLineGraph(parent, width, height, dataArray) {
    //this makes the element using my own code, no observable error here
    var canvas = newCanvas(parent, width, height);
    var canvasContext = canvas.getContext("2d");

    var spaceBetweenEntries = width / dataArray.length;

    var largestNumber = findHighestNumber(dataArray);

    canvasContext.beginPath();
    canvasContext.moveTo(0, 0);

    var n = 0;
    while (dataArray[n]) {

        var x = spaceBetweenEntries * n;
        var y = height - dataArray[n];
        console.log("x,y", x, y);
        canvasContext.lineTo(x, y);
        n++;
    }
    canvasContext.stroke();

    return canvas;
}

编辑:修复了图像，以便您可以看到 Canvas 大小

生成的图比预期的图小得多；例如newLineGraph("body",55,45,[1,40,10]);生成一个 Angular 落有一个小 ^ 形状的图形，而不是从底部开始。但是，控制台日志显示 "0 44""18.333333333333332 5","36.666666666666664 35" 我认为应该生成一个非常适合整个图表的图表。

Answer 1

第一个 lineTo 的 x 始终为 0，所以我假设第一行没有按照您的预期绘制。它更像是一个 |/\ 形状而不是 \/\。像这样设置 x:

var x = spaceBetweenEntries * (n + 1);

编辑

正如您在此 fiddle 中看到的那样您的图表使用您发布的坐标在正确的点呈现。我按照预期的方式实现了 newCanvas 函数。那么我们是否遗漏了一些其他修改 Canvas width 和 height 的代码？

function newCanvas(parent, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  document.querySelector(parent).appendChild(canvas);
  return canvas;
}