您的位置：首页 > Web前端 > JavaScript

使用JavaScript和SVG来绘制饼状图

2017-05-19 14:44 323 查看

使用JavaScript和SVG来绘制饼状图

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="document.body.appendChild(
pieChart([12,23,34,45],640,400,200,200,150,
['red','blue','yellow','green'],
['North','South','East','West'],400,100)
)">
<script>
/*创建一个<svg>元素，并在其中绘制一个饼状图
* 参数
*   data:用于绘制的数字类型的数组，数组每一项都有表示饼状图的一个
*   width,height:SVG图形的大小，单位像素
*   cx,cy,r:饼状图的圆心及半径
*   colors:一个包含HTML颜色信息的数组，每种颜色代表饼状图每个楔的颜色
*   lables一个标签数组，该信息说明饼状图中每个楔代表的含义
*   lx,ly：饼状图的左上角
* 返回：
*   一个保存饼状图的<svg>元素
*   调用者必须返回的元素插入到文档中
*   */
function pieChart(data,width,height,cx,cy,r,colors,labels,lx,ly){
//这个表示svg元素的xml命名空间
var svgns="http://www.w3.org/2000/svg";

//创建一个<svg>元素，同时指定像素大小和用户坐标
var chart=document.createElementNS(svgns,"svg:svg");
chart.setAttribute("width",width);
chart.setAttribute("height",height);
chart.setAttribute("viewBox","0 0 "+width+" "+height);

//累加data值，以便于知道饼状图的大小
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;

//遍历病状图的每个分片
starttangle=0;
for(var i=0;i<data.length;i++){
//这里表示楔的结束为止
var endangle=starttangle+angles[i];

//计算出楔和园橡胶的两个点
//这些计算公式都是以12点钟方向为0°
//顺时针方向角度递增
var x1=cx+r*Math.sin(starttangle);
var y1=cy-r*Math.cos(starttangle);
var x2=cx+r*Math.sin(endangle);
var y2=cy-r*Math.cos(endangle);

//这个标记表示角度大于半圆
//此标记在绘制SBG弧形组件的时候需要
var big=0;
if(endangle-starttangle>Math.PI) big=1;

//使用<svg:path>元素来描述楔
//要注意的是，使用ctreateElementNS()来创建该元素
var path=document.create
9d03
ElementNS(svgns,"path");

//下面的字符串包含路径的详细信息
var d="M "+cx+","+cy+ //从圆心开始
" L "+x1+","+y1+   //画一条到(x1,y1)的线段
" A "+r+","+r+     //再画一条半径为r的弧
" 0 "+big+" 1 "+    // 弧的详细信息
x2+","+y2+    //弧到(x2,y2)结束
" Z";   //d当前路径到(cx,cy)结束

//设置<svg:path>元素的属性
path.setAttribute("d",d);   //设置路径
path.setAttribute("fill",colors[i]); //设置楔的颜色
path.setAttribute("stroke","black");  //楔的外边框为黑色
path.setAttribute("stroke-width","2"); //两个单位
chart.appendChild(path); //将楔加入到饼状图中

//当前楔的结束就是下一个楔的开始
starttangle=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航