<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<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)
)">
<script>
/*创建一个<svg>元素,并在其中绘制一个饼状图
* 参数
* data:用于绘制的数字类型的数组,数组每一项都有表示饼状图的一个
* width,height:SVG图形的大小,单位像素
* cx,cy,r:饼状图的圆心及半径
* colors:一个包含HTML颜色信息的数组,每种颜色代表饼状图每个楔的颜色
* lables一个标签数组,该信息说明饼状图中每个楔代表的含义
* 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; //遍历病状图的每个分片
starttangle=0;
for(var i=0;i<data.length;i++){
//这里表示楔的结束为止
var endangle=starttangle+angles[i]; //计算出楔和园橡胶的两个点
//这些计算公式都是以12点钟方向为0°
//顺时针方向角度递增
var x1=cx+r*Math.sin(starttangle);
var y1=cy-r*Math.cos(starttangle);
var x2=cx+r*Math.sin(endangle);
var y2=cy-r*Math.cos(endangle); //这个标记表示角度大于半圆
//此标记在绘制SBG弧形组件的时候需要
var big=0;
if(endangle-starttangle>Math.PI) big=1; //使用<svg:path>元素来描述楔
//要注意的是,使用ctreateElementNS()来创建该元素
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"; //d当前路径到(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); //将楔加入到饼状图中 //当前楔的结束就是下一个楔的开始
starttangle=endangle; //绘制小方块表示图例
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);
label.setAttribute("font-family","sans-serif");
label.setAttribute("font-size","16");
label.appendChild(document.createTextNode(labels[i]));
chart.appendChild(label); //将文本添加到饼状图
}
return chart;
} </script>
</body>
</html>

效果:

【应用】SVG饼状图的更多相关文章

  1. JavaScript+svg绘制的一个饼状图

    结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...

  2. AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  3. D3.js 饼状图的制作

    1.数据 有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终 ...

  4. 【 D3.js 进阶系列 — 6.2 】 饼状图的拖拽

    本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有 ...

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

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

  6. 使用d3.v5实现饼状图

    效果图: 饼状图: 目录结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. D3(v5) in TypeScript 坐标轴之 饼状图生成

    饼状图生成时依旧遇到了类型问题,记录如下: import * as d3 from 'd3'; import * as React from 'react'; class TestGraph exte ...

  8. D3.js系列——布局:饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

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

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

随机推荐

  1. IIS下安装memcached管理工具—MemAdmin

    1.先看这篇文章 http://www.cnblogs.com/joylee/archive/2013/01/07/memadmin.html . 2.在IIS下安装的php-cgi.exe程序版本为 ...

  2. win7 更改同步时间的网址

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\D ...

  3. Service 层实现

    一.实验介绍 1.1 实验内容 本节课程主要利用 Spring 框架实现 Service 层. 1.2 实验知识点 Spring 框架 1.3 实验环境 JDK1.8 Eclipse JavaEE 二 ...

  4. The bean 'xxx' could not be injected as a 'xxx'because it is a JDK dynamic proxy that implements

    启动springboot项目的时候示以下错误 Error starting ApplicationContext. To display the conditions report re-run yo ...

  5. 22. Spring Boot 拦截器HandlerInterceptor【从零开始学Spring Boot】

    转:http://blog.csdn.net/linxingliang/article/details/52069495 上一篇对过滤器的定义做了说明,也比较简单.过滤器属于Servlet范畴的API ...

  6. Google架构学习

    http://hideto.iteye.com/blog/130815 原文:Google Architecture Google是伸缩性的王者.Google一直的目标就是构建高性能高伸缩性的基础组织 ...

  7. 传统的Java虚拟机和Android的Dalvik虚拟机及其ART模式

    Java虚拟机的解释执行引擎称为“基于栈的执行引擎”,其中所指的“栈”就是操作数栈.因此我们也称Java虚拟机是基于栈的,这点不同于Android虚拟机,Android虚拟机是基于寄存器的. 基于栈的 ...

  8. Docker在centos下安装以及常见错误解决

    系列目录 Docker安装(使用阿里云镜像) Docker从1.13版本之后采用时间线的方式作为版本号,分为社区版CE和企业版EE. 社区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外的收 ...

  9. javascript 返回上一页面

    <a href="<a href="javascript :history.back(-1)">返回上一页</a>或<a href=& ...

  10. 图像处理之opencv---加减乘除运算cvdiv

    http://chyyeng.blog.163.com/blog/static/16918230201211632135456/