D3 数据可视化考研人数直方图

最新推荐文章于 2023-12-29 15:11:13 发布

无bug代码搬运工

最新推荐文章于 2023-12-29 15:11:13 发布

阅读量178

点赞数

文章标签：信息可视化

本文链接：https://blog.csdn.net/DoKiDoK/article/details/130711121

版权

代码：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>历年考研人数对比</title>

</head>
<body>
<h1 style="text-align:center" font-size="50">历年考研人数对比（2005-2023）</h1>
<h2 style="text-align:right" font-seze="30">单位：百万</h2>
<svg id="mysvg" width=800 height=600></svg>
<script>
    var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

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

    var svg=document.getElementById("mysvg");
    svg.setAttribute("width",w);
    svg.setAttribute("height",h);
    var rec=new Array(19);
    var txt=new Array(19);
    var title=new Array(19);
    var height=new Array(117.2,127.1,128.2,120,124.6,140.6,151.1,165.6,176,172,164.9,177,201,238,290,341,377,457,474);
    var age=new Array("2005","2006","2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023");
    for(var i=0;i<19;i++){
        rec[i]=document.createElement("rect");
        svg.appendChild(rec[i]);
        txt[i]=document.createElement("text");
        svg.appendChild(txt[i]);
        title[i]=document.createElement("text");
        svg.appendChild(title[i]);
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        rec[i].outerHTML="<rect x="+(i*w/rec.length)+" y="+(h-height[i]-500)+" width="+(w*0.9/rec.length)+" height="+(height[i]+200)+" fill='rgb(" + r + "," + g + "," + b + ")'>";
        txt[i].outerHTML="<text x="+(i*w/rec.length+w/(4*rec.length))+" y="+(h-height[i]-500)+" fill='rgb(" + 0 + "," + 0 + "," + 0 + ")'"+"font-size="+30+">"+(height[i])+"</text>";
        title[i].outerHTML="<text x="+(i*w/rec.length+w/(4*rec.length))+" y="+(h-250)+" fill='rgb(" + 1 + "," + 0 + "," + 0 + ")'"+"font-size="+30+">"+age[i]+"年"+"</text>";
    }


</script>
</body>
</html>