《数据可视化原理与实例》临摹作业(西安交大国家艺术基金数据可视化培训第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>
第二节 递归二叉树
第三节 树状词云