结果：

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. OpenStack命令 创建网络和路由管理

    1.登陆用户 :tdy(前提条件创建了tdy用户) 编写登陆用户tdy用户 脚本文件  user-operc.sh user-operc.sh : 登陆用户tdy: $ source user-ope ...

  2. R语言-混合型数据聚类

    利用聚类分析,我们可以很容易地看清数据集中样本的分布情况.以往介绍聚类分析的文章中通常只介绍如何处理连续型变量,这些文字并没有过多地介绍如何处理混合型数据(如同时包含连续型变量.名义型变量和顺序型变量 ...

  3. SVN环境搭建步骤

    方法:一.准备工作1. Subversion服务器程序先到官方网站上下载最新版本.2. TortoiseSVN客户端程序它是一个客户端程序,用来与Subvers服务端通讯.Subversion自带一个 ...

  4. Neo4j 第五篇：批量更新数据

    相比图形数据的查询,Neo4j更新图形数据的速度较慢,通常情况下,Neo4j更新数据的工作流程是:每次数据更新都会执行一次数据库连接,打开一个事务,在事务中更新数据.当数据量非常大时,这种做法非常耗时 ...

  5. Adobe After Effects 2017-14.0安装教程

    Adobe After Effects 2017-14.0安装教程 第一步:首先请将电脑的网络断开,很简单:禁用本地连接或者拔掉网线,这样就可以免除登录Creative Cloud帐号,安装更方便快捷 ...

  6. Java IO流--练习2

    1)写一个Java程序,输入3个整数,并求出三个数的最大数和最小数 代码: package 第十二章IO流; import java.io.BufferedReader; import java.io ...

  7. cpp(第七章)

    1.c++提供了3种表示c—风格字符串方法:字符数组,字符串常量,字符串指针.其中字符数组并不一定是字符串,以空值字符'\0'来结束的字符数组时字符串. 2.函数参数为数组时,虽然减少了时间和内存的使 ...

  8. 信号处理——卷积（convolution）的实现

    作者:桂. 时间:2017-03-07  22:33:37 链接:http://www.cnblogs.com/xingshansi/p/6517301.html 前言 信号时域.频域对应关系,及其D ...

  9. asp.net core 教程（六）-中间件

    Asp.Net Core-中间件 在这一章,我们将了解如何设置中间件.中间件技术在 ASP.NET Core中控制我们的应用程序如何响应 HTTP 请求.它还可以控制应用程序的异常错误,这是一个在如何 ...

  10. Rhythmbox音乐播放器常见问题

    一.歌名中文乱码 对于所有用gstreamer做后端的播放器,如Rhythmbox, 设置如下的环境变量后即可正确读取mp3中GBK编码的id3 tag. export GST_ID3_TAG_ENC ...