javascript直方图

最新推荐文章于 2021-07-04 12:51:40 发布

Dreamer.He

最新推荐文章于 2021-07-04 12:51:40 发布

阅读量805

点赞数

本文链接：https://blog.csdn.net/qq_43406976/article/details/104761707

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript直方图</title>
</head>
<body>
this is a javascript
<svg id="svg01" 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;
    w=w*0.98;
    h=h*0.98;

    var svg=document.getElementById("svg01");
    svg.setAttribute("width",w);
    svg.setAttribute("height",h);
    var rec=new Array();
    var txt=new Array();
    for(var i=0;i<30;i++){
        rec[i]=document.createElement("rect");
        txt[i]=document.createElement("text");
        svg.appendChild(rec[i]);
        svg.appendChild(txt[i]);
        var rec_h=Math.floor(Math.random()*255);
        rec[i].outerHTML="<rect x="+(i*w/30)+" y="+(400-rec_h)+" width="+(w/30-5)+" height="+rec_h+" fill='rgb(0,0,"+rec_h+")'>"
        txt[i].outerHTML="<text x="+(i*w/30+(w/30-5)/2)+" y="+(400-rec_h)+" fill='red'>"+rec_h+"</text>"
    }

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

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dreamer.He

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript直方图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript直方图</title></head><body>this is a javascript<svg id="svg0...
复制链接

扫一扫