如何在没有任何库的情况下使用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>元素，在其中绘制图形。 然后，您可以通过id，class或其他方式使用document.getElementById或document.querySelector获取元素。 然后，您可以通过编程方式绘制一个简单的形状，如下所示：

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文档以获取有关使用画布的信息。

Answer 2

上面的注释是执行此操作的第一种方法，但还有另一种方法：

创建div元素，但根据JSON数据调整它们的大小并为其着色，如果正确使用css，您将获得条形图。 我认为这是制作图表的基本方法。 但是请注意JS代码的性能。