javascript - 如何在没有任何库的情况下使用 HTML、CSS、JavaScript 中的 json 数据绘制图形

Question

我需要使用 json 数据绘制线性图。我只能使用 HTML、CSS 和 JavaScript。不允许使用库和 api。谁能帮我解决这个问题。提前致谢。

json数据:

var marks: [
    {
      "name": AAA,
       "age":20,
      "exam": {
        "no_of_exams": 5,
        "average": "400"
      }
    },
    {
      "name": BBB,
       "age":25,
      "exam": {
        "no_of_exams": 10,
        "average": "800"
      }
    },{
      "name": ccc,
       "age":30,
      "exam": {
        "no_of_exams": 8,
        "average": "700"
      }
    }
];

现在我需要绘制 no_of_exams 和平均值。

Answer 1

首先你需要创建html <canvas>将在其中绘制图形的元素。然后你可以使用 document.getElementById 获取元素或 document.querySelector按 id、class 或其他。然后你可以像这样以编程方式绘制一个简单的形状:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10,0,20,75); // fillRect(x,y,width,height)

从 JSON 文件传递​​数据，您可以制作填充了所需高度和颜色的矩形。剩下的就是循环遍历所有数据并进行一些调整。像这样

var colors = ['red','green','blue','purple']
for (let i=0; i<marks.length; i++) {
  ctx.fillStyle = colors[i]
  ctx.fillRect(marks[i].exam.no_of_exams,marks[i].exam.average,20,75);
}

可以引用W3Schools docs获取有关使用 Canvas 的更多信息