数据可视化第一次作业

最新推荐文章于 2024-07-18 10:32:20 发布

JoannaWY

最新推荐文章于 2024-07-18 10:32:20 发布

阅读量5.7k

点赞数

分类专栏：数据可视化文章标签：数据矩阵可视化

本文链接：https://blog.csdn.net/JoannaWY/article/details/79706106

版权

数据可视化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bigdata</title>
</head>

<body>
<h1>&nbsp&nbspMobile Payments by Value</h1>
<h2>&nbsp&nbspYearly total mobile payments,billion USD</h2>
<svg id="mySVG" width="800" height="500" ></svg>
<script type="text/javascript">
var mysvg=document.getElementById("mySVG");
var rec=new Array();
var i=0;
rec[i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(20+i*30)+" y="+(500-20)+" width=30 height="+20+" style='fill:lightblue'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(20+i*30)+" y="+(500-5)+" width=30 height="+5+" style='fill:pink'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(20+i*30)+" y="+(500-10)+" width=30 height="+10+" style='fill:lightgreen'/>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(30+i*30)+" y="+(500-40)+" width=30 height="+40+" style='fill:lightblue'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(30+i*30)+" y="+(500-10)+" width=30 height="+10+" style='fill:pink'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(30+i*30)+" y="+(500-10)+" width=30 height="+10+" style='fill:lightgreen'/>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(40+i*30)+" y="+(500-200)+" width=30 height="+200+" style='fill:lightblue'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(40+i*30)+" y="+(500-30)+" width=30 height="+30+" style='fill:pink'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(40+i*30)+" y="+(500-17.5)+" width=30 height="+17.5+" style='fill:lightgreen'/>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(50+i*30)+" y="+(500-380)+" width=30 height="+380+" style='fill:lightblue'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(50+i*30)+" y="+(500-115)+" width=30 height="+115+" style='fill:pink'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(50+i*30)+" y="+(500-60)+" width=30 height="+60+" style='fill:lightgreen'/>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(60+i*30)+" y="+(500-485)+" width=30 height="+485+" style='fill:lightblue'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(60+i*30)+" y="+(500-360)+" width=30 height="+360+" style='fill:pink'/>";
rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(60+i*30)+" y="+(500-95)+" width=30 height="+95+" style='fill:lightgreen'/>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(20)+" y="+(10)+" width=60 height="+20+" style='fill:lightblue'/>";

var tuli;
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x=80 y=25 >AliPay</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(20)+" y="+(40)+" width=60 height="+20+" style='fill:pink'/>";

var tuli;
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x=80 y=55 >WeChat</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(20)+" y="+(70)+" width=60 height="+20+" style='fill:lightgreen'/>";

var tuli;
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x=80 y=85 >others</text>";

</script>
<p>&nbsp&nbsp&nbsp2012&nbsp&nbsp&nbsp&nbsp2013&nbsp&nbsp&nbsp&nbsp&nbsp2014&nbsp&nbsp&nbsp&nbsp2015&nbsp&nbsp&nbsp&nbsp2016&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</p>
<p>&nbsp&nbspsource: Kapronasia analysis iresearch China internet watch</p>
</body>
</html>