欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《数据可视化原理与实例》临摹作业(西安交大国家艺术基金数据可视化培训第16天)

程序员文章站 2024-02-13 17:14:16
...

本章用JSP和SVG绘图完成简单的文字、形状的使用。

第二章 基于JavaScript和SVG的绘图
第一节 直方图
案例1 :用js的for循环语句绘制一组直方图
代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>使用SVG绘制简单的直方图</title>
    </head>

    <body>
    
    <svg id="mySVG" width=800 height=600>
     <!--
        <rect x="0" y="15" fill="blue">
      --> 
    </svg>

    <script type="text/javascript">
            var x=100,y=300;
            var mysvg = document.getElementById("mySVG");
            var svgrec= new Array();
            for(var i=0;i<6;i++){
                svgrec[i] = document.createElement("rect");
                mysvg.appendChild(svgrec[i]);
                var h=Math.random()*300;
                svgrec[i].outerHTML="<rect x="+(i*x)+" y="+(y-h)+" width=70 height="+(h)+" style='fill:red'>";
            }

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

案例2:使用SVG绘制简单的动态直方图

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>使用SVG绘制简单的动态直方图</title>
    </head>

    <body>
    
    <svg id="svg01" width=800 height=600>
     <!--
        <rect x="0" y="15" fill="blue">
      --> 
    </svg>

    <script type="text/javascript">      
       var x=100,y=300;
            var svg = document.getElementById("svg01");
            var rec= new Array();
            var txt= new Array();
            for(var i=0;i<6;i++){
                rec[i] = document.createElement("rect");
                txt[i] = document.createElement("text");
                svg.appendChild(rec[i]);
                svg.appendChild(txt[i]);
                var h=Math.random()*255;
                rec[i].outerHTML="<rect x="+(80*i)+" y="+(400-h)+" width=70 height="+h+" style='fill:rgb(0,0,"+Math.floor(h)+")'/>";
                txt[i].outerHTML="<text x="+(10+80*i)+" y="+(400-h)+">"+Math.floor(h)+"</text>";
        }   
  </script>
    </body>
</html>


第二节 递归二叉树

第三节 树状词云
 

相关标签: JSP SVG