<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>直方图</title>
</head>
<body>
<!--创建并设置矩形所在的区域大小为1200x800，
如果宽度不够大，在循环画矩形时会不够位置放置 -->
<svg id="myreact" width="1200" height="800"></svg>
<script>
//var x=110,y=800;
var mysvg = document.getElementById("myreact");
//svg为从body里获取的矩形所起的名字
var svgreact = new Array(10);
//命名一个大小为10个元素的数组
for(var i=0; i<10; i++){
//画10个矩阵
svgreact[i] = document.createElement("rect");
//为数组元素创建节点rect
mysvg.appendChild(svgreact[i]);
//获取的矩阵svg的子节点为数组元素的节点
var h = Math.random()*400;
//设置一个随机数，范围为400以内
svgreact[i].outerHTML="<rect x ="+(i*110)+" y="+(800-h)+" width=100 height="+h+" style='fill:red' />"
//设置矩形的方位：x为i乘以110，y为800减去随机数，矩形颜色充满红色fill red
}
</script>
</body>
</html>
