结果:

svg参考:https://www.w3.org/TR/SVG/

<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));
'>
<!-- <object data="./sample.svg" type="image/svg+xml" width="300px" height="300px" /> -->
<script type="text/javascript">
/**
* 创建一个<svg>元素,并在其中绘制一个饼状图
* 参数:
* data:用于绘制的数字类型的数组,数组每一项都表示饼状图的一个楔
* width,height: SVG图形的大小,单位为像素
* cx cy r : 饼状图的圆心及半径
* colors: 一个包含HTML颜色信息的数组,每种颜色代表饼状图每个楔的颜色
* labels: 一个标签数组,该信息说明饼状图中每个楔代表的含义
* 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; //遍历饼状图的每个分片
startangle = 0 ;
for(var i = 0 ; i < data.length ; i++){
//这里表示楔的结束位置
var endagle = startangle+angles[i]; //计算出楔和园相交的两个点
//这些计算公式都是以12点钟方向为0度
//顺时针方向角度递增
var x1 = cx+r*Math.sin(startangle);
var y1 = cy-r*Math.cos(startangle);
var x2 = cx+r*Math.sin(endagle);
var y2 = cx-r*Math.cos(endagle); //这个标记表示角度大于半圆
//此标记在绘制svg弧形组件的时候需要
var big = 0;
if(endagle - startangle > Math.PI)
big = 1; //使用<svg:path>元素来描述楔
//要注意的是,使用createElementNS()来创建该元素
var path = document.createElementNS(svgns , "path"); //下面的字符串包含路径的详细信息
var d= "M " + cx + "," + cy + //从圆心开始
" L " + x1 + "," + y1 + //画一条到(x1,y1)的线段
" A " + r + "," + r + //再画一条半径为r的弧
" 0 " + big + " 1 " + //弧的详细信息
x2 + "," + y2 + //弧到(x2,y2)结束
" Z"; //当前路径到(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); //将楔加入到饼状图中 //当前楔的结束就是下一个楔的开始
startangle = endagle; //现在绘制一些相应的小方块来表示图例
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);
//文本样式属性还可以通过CSS来设置
label.setAttribute("font-size","16");
label.setAttribute("font-family","sans-serif");
//在<svg:text>元素中添加一个DOM文本节点
label.appendChild(document.createTextNode(labels[i]));
chart.appendChild(label); //将文本添加到饼状图中
}
return chart;
}
</script>

  

JavaScript+svg绘制的一个饼状图的更多相关文章

  1. C#绘制立体三维饼状图

    转载自原文 C#绘制立体三维饼状图(超酷) 内容原文地址:LINK [翻译]Julijan Sribar著3D Pie Chart一个用于绘制立体三维饼状图的C#类库[简介]本文的想法就是创建一个独立 ...

  2. extjs开发———用extJS简单写一个饼状图

    先上效果图: js编写部分简单如下,先插入一个模块,然后给模块中添加内容. var myChart1 = echarts.init(document.getElementById('myChart1' ...

  3. JavaScript+svg绘制的一个动态时钟

    结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head ...

  4. echarts入门基础,画一个饼状图

    注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. 【应用】SVG饼状图

    <!DOCTYPE html> <html> <head> <title></title> </head> <body o ...

  6. DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)

    最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...

  7. D3.js的v5版本入门教程(第十三章)—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  8. FusionChart实现柱状图、饼状图的动态数据显示 附Demo

    最近做的项目中需要用饼状图显示——'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资 ...

  9. HTML5-svg圆形饼状图进度条实现原理

    <svg width="440" height="440" viewbox="0 0 440 440"> <circle ...

随机推荐

  1. 你为什么必须(从现在开始就)掌握linux

    写在前面 在我看来,人人都应该学习linux,但这不是本文探讨的重点.本文主要从软件测试人员的角度谈谈学习和掌握linux的重要性.必要性.紧迫性. 另外: 这里所说的linux系统,是unix系统和 ...

  2. 使用CSS设置滚动条样式以及如何去掉滚动条的方法

    <STYLE> BODY { SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SH ...

  3. 网络编程4之UDP协议

    一.定义 UDP 是User Datagram Protocol的简称, 中文名是用户数据报协议,是OSI(Open System Interconnection,开放式系统互联) 参考模型中一种[无 ...

  4. 史上最完整Hadoop2.x完全分布式安装部署-小白也能学会

    一.环境要求: 1.        虚拟机安装并设置网络: 2.        修改主机地址映射: 3.        必备软件:Jdk.Development Tools   Development ...

  5. Docker示例

    运行一个Hello world   zane@zane-V:~$ docker run ubuntu /bin/echo 'Hello world' Unable to find image 'ubu ...

  6. css3转盘抽奖

    做到一个活动,需要转盘抽奖,于是想到使用css3的动画效果,其中主要包含transition的动画过渡,transform的rotate的旋转效果,在这里只用到2d的旋转, 特别强调的是,因为需要和后 ...

  7. Codility---MaxProfit

    Task description A zero-indexed array A consisting of N integers is given. It contains daily prices ...

  8. for循环 重点题

    1.冒泡排序  (特别重要): <script type="text/javascript"> var attr=Array(); for(var i=0; i< ...

  9. ASP.NET MVC开发学习过程中遇到的细节问题以及注意事项

    1.datagrid中JS函数传值问题: columns: { field: 'TypeName', title: '分类名称', width: 120, sortable: true, format ...

  10. HTML5浏览器定位navigator.geolocation.getCurrentPosition

    <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...