js 绘制svg饼状图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

</svg>

</svg>

function pieChart(data,width,height,cx,cy,r,colors,labels,lx,ly){

　　 var svgns = "http://www.w3.org/2000/svg";//这个是表示svg元素的XML命名空间

　　 var chart = document.createElementNS(svgns,"svg:svg");//ie9+

document.createElementNS() 创建具有指定命名空间URI（namespace URI）和指定名字的元素。

element = document.createElementNS(namespaceURI, qualifiedName);

•element：被创建的元素

•namespaceURI：是一个字符串指定了关联元素的namespace URI。

被创建元素的namespaceURI属性被初始化为参数中namespaceURI的值

•HTML - Use http://www.w3.org/1999/xhtml

•XUL - Use http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

•SVG - Use http://www.w3.org/2000/svg

•qualifiedName：是一个字符串，指定被创建元素的类型。被创建元素的nodeName属性被初始化为qualifiedName的值

　　chart.setAttribute("width",width);

　　chart.setAttribute("height",height);

　　chart.setAttribute("viewBox","0 0"+width+""+height);//用户坐标

　　 var total = 0;

　　 for(var i=0;i<data.length;i++) total += data[i];

　　var angles = [];

　　for(var i=0;i<data.length;i++) angles[i] = data[i]/total*Math.PI*2; /*//Math.PI圆周率*/

　　startangle = 0;

　 for(var i=0;i<data.length;i++){

　　　　 var endangle = startangle+angles[i];

　　　　var x1 = cx +r*Math.sin(startangle);

　　　　 var y1 = cy - r*Math.cos(startangle);

　　　　var x2 = cx +r*Math.sin(endangle);

　　　　 var y2 = cy - r*Math.cos(endangle);

　　　　 var big = 0;

　　　　if(endangle-startangle>Math.PI) big = 1;

　　　　var path = document.createElementNS(svgns,"path");

　　　　 var d = "M"+cx+","+cy+

　　　　　　　　 "L"+x1+","+y1+

　　　　　　　　 "A"+r+","+r+","+ "0"+","+big+","+"1"+","+ x2+","+y2+

　　　　　　　　 "Z";

M moveto 移动到 (x y)+

Z closepath 关闭路径 (none)

L lineto 画线到 (x y)+

H horizontal lineto 水平线到 x+

V vertical lineto 垂直线到 y+

C curveto 三次贝塞尔曲线到 (x1 y1 x2 y2 x y)+

S smooth curveto 光滑三次贝塞尔曲线到 (x2 y2 x y)+

Q quadratic Bézier curveto 二次贝塞尔曲线到 (x1 y1 x y)+

T smooth quadratic Bézier curveto 光滑二次贝塞尔曲线到 (x y)+

A elliptical arc 椭圆弧 A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)+

RX,RY指所在椭圆的半轴大小

XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。

FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。

FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针

X,Y为终点坐标

R Catmull-Rom curveto* Catmull-Rom曲线 x1 y1 (x y)+

如果指令字母是大写的，例如M, 则表示坐标位置是绝对位置；如果指令字母小写的，例如m, 则表示坐标位置是相对位置

　　 path.setAttribute("d",d);

　　　　 path.setAttribute("fill",colors[i]);

　　　　path.setAttribute("stroke","black");

　　　　path.setAttribute("stroke-width","2");

　　　　chart.appendChild(path);

　　　　startangle = endangle;

　　　　var icon = document.createElementNS(svgns,"rect");

　　　　 icon.setAttribute("x",lx);

　　　　 icon.setAttribute("y",ly+30*i);

　　　　icon.setAttribute("width",20);

　　　　 icon.setAttribute("height",20);

　　　　 icon.setAttribute("fill",colors[i]);

　　　　icon.setAttribute("stroke","black");

　　　　 icon.setAttribute("stroke-width",2);

　　　　 chart.appendChild(icon);

　　　　var label = document.createElementNS(svgns,"text");

　　　　label.setAttribute("x",lx+30);

　　　　label.setAttribute("y",ly+30*i+18);

　　　　 label.setAttribute("font-family","sans-serif");

　　　　 label.setAttribute("font-size","16");

　　　　 label.appendChild(document.createTextNode(labels[i]));

　　　　chart.appendChild(label);

　　}

　　 return chart;

}

</script>

</body>

</html>

posted on 2014-11-18 10:45 zxxingl 阅读(377) 评论(0) 收藏举报