javascript - 从动态数组值创建 Canvas 条形图

Question

我正在尝试从动态创建的元素数组创建条形图。

当前数组列表，chrr1 = [xxx, xxx, xxx, xxx, xxx, xxx, xxxx]。我还使用alert()检查了canvas.height设置为200，并且h正在循环并除以10，如函数中所示。

但是条形图尚未创建。我尝试增加高度但没有成功。它只在 Canvas 的右侧显示一个栏(我无法在此处上传图像。 uploader 似乎无法正常工作。)

var canvas = document.getElementById("ttmrev");
  var c = canvas.getContext("2d");
  c.fillStyle = "#000000";
  var currX = 0;
  var width = 30;
  for(j = 0; j < chrr1.length; j++) {
    var max_value = Math.max.apply(null, chrr1);
    var max_val_str = max_value.toString();
    if (max_val_str.length < 5) {
      canvas.height = "200";
    } else {
      canvas.height = "1000";
    }
    var h = chrr1[j];
    var g = h.toString();
    if (g.length < 5) {
      h = h/10;
    } else if (g.length >= 5) {
      h = h/100;
    } else if (!g || g.length === 0) {
      h = 0;
    }
    c.rect(currX, canvas.height - h, width, h);
    c.fill();
    currX += 40;
    }

任何帮助将不胜感激。

Answer 1

问题是，您在 for 循环内调整 Canvas 大小，这会扭曲 Canvas ，使之前的所有绘图消失。

你应该在 for 循环之外调整 Canvas 大小，就像这样......

var canvas = document.getElementById("ttmrev");
var c = canvas.getContext("2d");
var currX = 0;
var width = 40;
chrr1 = [333, 222, 666, 1200, 444, 1000];

var max_value = Math.max.apply(null, chrr1);
var max_val_str = max_value.toString();
if (max_val_str.length < 5) {
    canvas.height = 200;
} else {
    canvas.height = 1000;
}

for (j = 0; j < chrr1.length; j++) {
    var h = chrr1[j];
    var g = h.toString();
    if (g.length < 5) {
        h = h / 10;
    } else if (g.length >= 5) {
        h = h / 100;
    } else if (!g || g.length === 0) {
        h = 0;
    }
    c.rect(currX, canvas.height - h, width, h);
    c.fillStyle = "#000000";
    c.fill();
    currX += 52;
}

body{margin:10px 0 0 0;overflow:hidden}canvas{border:1px solid #e4e6e8}

<canvas id="ttmrev"></canvas>