结果：

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. PF2.1版本总结，在设计过程中遇到的问题以及技术分享

    在距离上一次的版本发布已经过去4个月的时间,因为个人的能力以及时间有限,所以这次的版本会推迟这么久.可是无论怎样,PF2.1带着自身的完善总算不负所望推出.在这次的版本调整中让我深有体会到了程序设计中 ...

  2. iOS安全攻防之越狱设备检测

    iOS 越狱(iOS Jailbreaking),是用于获取苹果公司便携装置操作系统iOS最高权限的一种技术手段,用户使用这种技术及软件可以获取到 iOS 的最高权限,甚至可能可以进一步解开运营商对手 ...

  3. React模块化开发

    借助前端构建工具webpack 1.webpack是facebook为react量身打造的构建工具 2.主要作用是实现模块化,代码整合,代码分割的作用 3.使用webpack整合以后 也不需要使用br ...

  4. setTimeout异步加载

    两道经典的面试题,直接上代码 for(var i=0; i<3; i++){ setTimeout(function(){ i+=i; console.log(i); },1000) } var ...

  5. Java中的系统时间

    System.currentTimeMillis()产生一个当前的毫秒,这个毫秒其实就是自1970年1月1日0时起的毫秒数,Date()其实就是相当于Date(System.currentTimeMi ...

  6. 泛型（java菜鸟的课堂笔记）

                1. 泛型的简单运 用和意义   2. 泛型的上限与下限   3. 泛型和 子类继承的限制   4. 泛型类和泛型 方法   5. 泛型嵌套和泛型擦除             ...

  7. asp.net core教程 （二）

    Asp.net Core环境设置 Asp.net Core环境设置 安装Microsoft Visual Studio 2015 Asp.Net Core是Asp.Net的一个重大的重新设计. 这个话 ...

  8. 简单两步快速学会使用Mybatis-Generator自动生成entity实体、dao接口和简单mapper映射（用mysql和oracle举例）

    前言: mybatis-generator是根据配置文件中我们配置的数据库连接参数自动连接到数据库并根据对应的数据库表自动的生成与之对应mapper映射(比如增删改查,选择性增删改查等等简单语句)文件 ...

  9. Windows系统前端常用PS快捷键：

    1.设置滚轮放大缩小: 编辑--首选项--常规--用滚轮缩放 2.V 移动 ctrl+v 自动选中(图层), 3.M 选框 Shift+M 变换形状 Alt :确定圆形/矩形中心 Shift: 圆形/ ...

  10. POJ 2388

    还是水题,简单的排序.大半夜的,没脑子想太复杂的代码了,就随手找了段以前写的插入排序将就着用了. 题目的意思就是取一个数列的中位数,很简单,排序后取a[n/2]即可. 代码如下: #ifndef _2 ...