Javascript 如何从JSON数据生成SVG中的堆栈条形图？

我是在回答@markb提出的问题，但问题被删除了。我在这里分享我的解决方案

目标是将JSON数据转换为如下图形栏：

JSON数据的格式如下：

// dummy data
const json = `{ "data": [ 
    { "value": [1, 2, 3, 4] }, 
    { "value": [5, 6, 7, 8] },
    { "value": [9, 0, 1, 2] },
    { "value": [3, 4, 5, 6] } 
] }`,
  dataJSON = JSON.parse(json).data;

---

我可以提出这个解决方案

//伪数据
常量json=`{“数据”：[
{“值”：[1,2,3,4]}，
{“值”：[5,6,7,8]}，
{“值”：[9,0,1,2]}，
{“值”：[3,4,5,6]}
] }`,
dataJSON=JSON.parse（JSON）.data；
const graphDOM=document.getElementById（“graphDOM”）；
常数imageHeight=100；
常数colWidth=10；
const spaceBetweenCols=20；
//这将包含每列的总和
const totalColumns=[]；
//这是a列的最高值
maxValueAllColumns=0；
//这是将显示的列数
nbColumns=0；
对于（直线=0；line@markb如果您仍然需要它，就像它因为缺少
而无法工作一样。添加了这一点。Javascript应该删除div中的所有内容，但谢谢，它更干净。：）我没有关注如何以最佳方式显示html，所描述的问题更多的是关于如何构建图形。