结果：

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. SAS PROC MCMC example in R: Logistic Regression Random-Effects Model（转）

    In this post I will run SAS example Logistic Regression Random-Effects Model in four R based solutio ...

  2. stat命令

  3. HTML输入框只能输入数字或数字字母组合

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...

  4. JSON数据解析：Gson（谷歌）和fastjson（阿里巴巴）的异同点

    Gson和fastjson分别为谷歌和阿里巴巴对JSON数据进行处理封装的jar包 Gson(谷歌)和fastjson(阿里巴巴)两者异同点: 相同点:都是根据JSON数据创建相应的类 不同点: 1. ...

  5. Java IO流--练习2

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

  6. 构建自己的PHP框架--构建模版引擎(2)

    自从来到新公司就一直很忙,最近这段时间终于稍微闲了一点,赶紧接着写这个系列,感觉再不写就烂尾了. 之前我们说到,拿到{{ $name }}这样一段内容时,我们只需要将它转化成<?php echo ...

  7. 【Spark2.0源码学习】-10.Task执行与回馈

         通过上一节内容,DriverEndpoint最终生成多个可执行的TaskDescription对象,并向各个ExecutorEndpoint发送LaunchTask指令,本节内容将关注Exe ...

  8. 谈谈this对象

    通过平常的使用简单总结了一下不同形式的函数调用下this的指向,函数的调用形式决定了this的指向.就简单分析一下以下几种情况: 情况一:纯粹的函数调用 eg: var x=1; function f ...

  9. javaCV开发详解之5：录制音频(录制麦克风)到本地文件/流媒体服务器(基于javax.sound、javaCV-FFMPEG)

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  10. 使用SQL Server 发送邮件

    在很多数据分析和集成的场景下,我们需要了解数据库中关键的脚本或者job的执行情况.这个时候邮件提醒是一种比较不错的通知方式.本文从零开始,一步一步的介绍如何使用SQL Server来发送邮件. 环境: ...