结果：

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. MyBatis通用Mapper开发

    通常情况下,MyBatis 的增删改查操作需要自己在相应xml中写相关语句, 但是运用相关工具,其实可以很方便的自动生成单表的所有增删改查(通用的多表联合查询还是需要自己写). 也可以根据具体环境,设 ...

  2. How-to go parallel in R – basics + tips（转）

    Today is a good day to start parallelizing your code. I’ve been using the parallel package since its ...

  3. 测试工具——JMeter

    本学期新学的课程,软件测试,上机的实验用到了C++Test,QTP,还有JMeter.今天针对JMeter做一次总结,方便以后用到,知道步骤会更加方便. 首先,对Jmeter进行一个大致的了解,包括对 ...

  4. 【Python的迭代器，生成器】

    一.可迭代对象和迭代器 1.迭代的概念 上一次输出的结果为下一次输入的初始值,重复的过程称为迭代,每次重复即一次迭代,并且每次迭代的结果是下一次迭代的初始值 注:循环不是迭代 while True: ...

  5. Java经典编程题50道之三十三

    打印出杨辉三角形(要求打印出10行如下图)11 11 2 11 3 3 11 4 6 4 11 5 10 10 5 1 public class Example33 { public static v ...

  6. css中那些容易被我们程序猿所忽略的选择器

    css中那些容易被我们程序猿所忽略的选择器 作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解 ...

  7. 移动端设置fixed布局的问题解决

    最近写移动端,遇到一个问题就是用fixed属性布局的时候由于手机的原因会出现很多问题,比如说手机端底部固定一块,然后里面有输入框,(类似于手机QQ或者微信底部的输入框一样的布局)这个时候在调用软键盘的 ...

  8. HTML里的哪一部分Javascript 会在页面加载的时候被执行？

    最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...

  9. String 类问题发现与解决

    1.在代码中出现:String t = null; t.length(); 执行后:控制台报:java.lang.NullPointerException 原因:Java中,null是一个关键字,用来 ...

  10. [0] DDD领域驱动设计（三） 之 聚合（根）、实体、值对象

    1.      聚合根.实体.值对象的区别? 从标识的角度: 聚合根具有全局的唯一标识,而实体只有在聚合内部有唯一的本地标识,值对象没有唯一标识,不存在这个值对象或那个值对象的说法: 从是否只读的角度 ...