Javascript条形图-微信支付宝市场占有率

最新推荐文章于 2024-07-27 17:02:23 发布

qq_38829768

最新推荐文章于 2024-07-27 17:02:23 发布

阅读量560

点赞数

文章标签：条形图支付宝微信

本文链接：https://blog.youkuaiyun.com/qq_38829768/article/details/79720387

版权

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

<body>
<h1 align="center">2017年1-12月短视频独立APP行业月活跃用户规模</h1>
<svg id="mySVG" width="1300" height="500" ></svg>
<script type="text/javascript">
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var mysvg=document.getElementById("mySVG");
var rec=new Array();
var i=0;
w=w-60;
var tuli;

rec[i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-203)+" width=40 height="+203+" style='fill:lightblue'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-203)+" >2.03</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >一月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-200)+" width=40 height="+200+" style='fill:pink'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-200)+" >2.00</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >二月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-213)+" width=40 height="+213+" style='fill:lightgreen'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-213)+" >2.13</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >三月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-227)+" width=40 height="+227+" style='fill:lightblue'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-227)+" >2.27</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >四月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-233)+" width=40 height="+233+" style='fill:pink'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-233)+" >2.33</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >五月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-248)+" width=40 height="+248+" style='fill:lightgreen'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-248)+" >2.48</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >六月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-283)+" width=40 height="+283+" style='fill:lightblue'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-283)+" >2.83</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >七月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-299)+" width=40 height="+299+" style='fill:pink'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-299)+" >2.99</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >八月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-305)+" width=40 height="+305+" style='fill:lightgreen'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-305)+" >3.05</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >九月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-346)+" width=40 height="+346+" style='fill:lightblue'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-346)+" >3.46</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >十月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-379)+" width=40 height="+379+" style='fill:pink'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-379)+" >3.79</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >十一月</text>";

rec[++i]=document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+((w/20)*i+300)+" y="+(450-414)+" width=40 height="+414+" style='fill:lightgreen'/>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+(440-414)+" >4.14</text>";
tuli=document.createElement("text");
mysvg.appendChild(tuli);
tuli.outerHTML="<text x="+((w/20)*i+300)+" y="+470+" >十二月</text>";

</script>
<p align="center">数据来源：QuestMobile TRUTH 中国移动互联网数据库 2017年12月</p>
</body>
</html>