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

问题描述：

我需要使用json数据绘制线性图。我被允许只使用HTML，CSS和JavaScript。没有图书馆和API是允许的。任何人都可以请帮我解决这个问题。提前致谢。如何在没有任何库的情况下使用HTML，CSS，JavaScript中的json数据绘制图形

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和平均值。

请分享您尝试过的以及失败的原因。恐怕这个问题应该被标记为“太宽泛而无法回答”。 – SarathChandra

答

首先，您需要创建将绘制图形的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 docs，以获取有关使用帆布

答

的评论是自主这样做的第一种方式铁道部信息，但还有一个办法：

创建DIV元素，但根据JSON数据调整它们的大小并对它们进行着色，如果正确使用css，则会得到条形图。我认为这是制作图表的基本方法。但要小心JS代码的性能。

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

相关推荐