svg 图表应用测试(部分代码实现, 备忘)

 

<!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上测试过。

 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

金秋送爽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值