代码如下：
<html>
<head>
<title>直方图</title>
</head>
<body>
<h3 style="text-align:center;"> 热映电影累计票房</h3>
<h5 style="text-align:center;">                     ——截止2018年3月20日晚22时30分</h5>
<h6 align="center">单位：亿</h6>
<svg id ="mysvg1" width=100 height=600 >
</svg>
<svg id="mysvg" width=850 height=600>
</svg >
<script>
var thesvg=document.getElementById("mysvg");
var thesvg1=document.getElementById("mysvg1");
var rec=new Array();
var tex=new Array();
var nam=new Array();
var name1=["古墓丽影：源起之战","黑豹","水形物语","红海行动","小萝莉的猴神大叔","唐人街探案2","厉害了，我的国","大坏狐狸的故事", "彼得兔","三块广告牌","虎皮萌企鹅","捉妖记2"];
var money=[3.18,6.17,0.79,34.81,2.34,33.33,3.44,0.11,1.43,0.58,0.064,22.14];
for(var i=0;i<12;i++){
rec[i]=document.createElement("rect");//创建节点<rect>
tex[i]=document.createElement("text");//创建节点<text>
nam[i]=document.createElement("text");//创建节点<text>
1
thesvg1.appendChild(nam[i]);
thesvg.appendChild(rec[i]);
thesvg.appendChild(tex[i]);
var width=Math.floor(money[i]*20);
var blank=10;//矩形之间的留白
var height=40;//每个矩形的宽度
nam[i].outerHTML="<text style='fill:rgb("+(width%255)+",60,60);font-size:10px;font-family:Verdana;text-align:right;' x=10 y="+(height *i+blank+20)+">"+name1[i];//电影名称
rec[i].outerHTML="<rect x=70 y="+(height *i+blank)+" width="+width+" height=30 style='fill:rgb("+(width%255)+",60,60);opacity:0.8'>";//矩形
tex[i].outerHTML="<text style='font-size:16px;font-family:Verdana' x="+(width+75)+" y="+(height *i+blank+20)+">"+money[i]+" ";//票房
}
</script>
</body>
</html>
注：数据越大，颜色越浅。