svg 图表应用测试（部分代码实现，备忘）

yanshaozhi

浏览: 102873 次
性别:
来自: 东营

最近访客更多访客>>

salonwang

anotherwriter

huangbo_2020

jysboy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>svg</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	(
		function(){
			var arr = new Array();
			arr.push({x:0,y:10});
			arr.push({x:2,y:2});
			arr.push({x:4,y:8});
			arr.push({x:6,y:5});
			arr.push({x:8,y:7});
			arr.push({x:10,y:0});
			
			//最大值和最小值构成的矩形
			function ChartRect(){
				this.maxX = null;
				this.minX = null;
				this.maxY = null;
				this.minY = null;
			}
			
			function Point(){
				this.x = 0;
				this.y = 0;
			}
			
			//绘制图像
			function draw(width,height,arr,xLabel,yLabel,xTages,yTages,bottom,left){
				var rect = getChartRect(arr);
				var svg = createChart(500,400,'测试绘图');
				var points = "";
				//TODO draw x,y labels and tags
				var unitY = (height-bottom-20)/(rect.maxY-rect.minY);
				var unitX = (width-left-20)/(rect.maxX-rect.minX);

				for(var i = 0; i < arr.length ; i++){
					var pp = calPosition(arr[i],left,bottom,height,unitX,unitY)
					points = points + pp.x + "," + pp.y + " ";
				}
				var line = document.createElementNS('http://www.w3.org/2000/svg','polyline');
				line.setAttribute("points",points);
				line.setAttribute("fill","white");
				line.setAttribute("stroke","red");
				line.setAttribute("stroke-width","2");
				svg.appendChild(line);
				
				var xl = createLine({x:left,y:0},{x:left,y:height});
				svg.appendChild(xl);
				var yl = createLine({x:0,y:height-bottom},{x:width,y:height-bottom});
				svg.appendChild(yl);
			}
			
			function createLine(start,end){
				var line = document.createElementNS('http://www.w3.org/2000/svg','line');
				line.setAttribute("x1",start.x);
				line.setAttribute("y1",start.y);
				line.setAttribute("x2",end.x);
				line.setAttribute("y2",end.y);
				line.setAttribute("fill","white");
				line.setAttribute("stroke","blue");
				line.setAttribute("stroke-width","2");
				return line;
			}
			
			//根据原始点获取坐标位置
			function calPosition(po,left,bottom,height,unitX,unitY){
				var point = new Point();
				var oY = height-bottom;
				var oX = left;
				point.x = oX + po.x * unitX;
				point.y = oY - po.y * unitY;
				return point;
			}
			
			//var px = calPosition({x:10,y:19},10,10,400,10,10);
			//alert(px.x + ' ' + px.y);
			
			draw(500,400,arr,'x','y','xt','yt',10,10);
			
			//得到矩形
			function getChartRect(arr){
				var rect = new ChartRect();
				for(var i = 0;i<arr.length;i++){
					var p = arr[i];
					if(rect.maxX == null || p.x > rect.maxX){
						rect.maxX = p.x;
					}
					if(rect.minX == null || p.x <rect.minX){
						rect.minX = p.x;
					}
					if(rect.maxY == null || p.y > rect.maxY){
						rect.maxY = p.y;
					}
					if(rect.minY == null || p.y <rect.minY){
						rect.minY = p.y;
					}
				}
				return rect;
			}
			
			//创建绘图
			function createChart(width,height,title){
				var svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
				svg.setAttribute("height",height);
				svg.setAttribute("width",width);
				var header = document.createElementNS('http://www.w3.org/2000/svg','text');
				header.setAttribute("id","headerx");
				header.setAttribute("x",10);
				header.setAttribute("y",10);
				header.textContent = "报表测试";
				header.setAttribute("fill",'black');
				svg.appendChild(header);
				var body=document.getElementsByTagName('body')[0];
				body.appendChild(svg);
				return svg;
			}
		}
	)();
</script>

仅仅在chrome上测试过。