数据可视化·简单的横向条形图
代码如下：
<html>
<head>
<title>直⽅图</title>
</head>
<body>
<h3 > 热映电影累计票房</h3>
<h5 >                     ——截⽌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 ElementById("mysvg");
var ElementById("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]=ateElement("rect");//创建节点<rect>
tex[i]=ateElement("text");//创建节点<text>
nam[i]=ateElement("text");//创建节点<text>
1
thesvg1.appendChild(nam[i]);
thesvg.appendChild(rec[i]);
thesvg.appendChild(tex[i]);
var width=Math.floor(money[i]*20);
svg和h5的关系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>
注：数据越⼤，颜⾊越浅。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。