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