<!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. MAC终端命令行整理

    参考:http://www.jianshu.com/p/3291de46f3ff 目录操作 命令名 说明 举例 cd 切换到指定目录 cd test ls 查看这个目录下的所有文件 ls /Users ...

  2. Concurrency and Application Design (一)

    在计算机发展的早期,单位工作时间的最高限额是一台计算机可以执行通过CPU的时钟速度确定.但是,随着技术的进步和处理器设计变得更紧凑,热等物理约束开始限制处理器的最高时钟速度.因此,芯片制造商寻找其它的 ...

  3. iOS -- SKTextureAtlas类

      SKTextureAtlas类 继承自 NSObject 符合 NSCodingNSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKi ...

  4. 修改ViewPager调用setCurrentItem时，滑屏的速度 ,解决滑动之间切换动画难看

    在使用ViewPager的过程中,有需要直接跳转到某一个页面的情况,这个时候就需要用到ViewPager的setCurrentItem方法了,它的意思是跳转到ViewPager的指定页面,但在使用这个 ...

  5. Jstl indexOf 参考

    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> < ...

  6. 赵雅智_Swift（3）_swift凝视

    请将你的代码中的非运行文本凝视成提示或者笔记以方便你将来阅读. Swift 的编译器将会在编译代码时自己主动忽略掉凝视部分. 单行凝视 以双正斜杠作(//)为起始标记: // 这是一个凝视 多行凝视 ...

  7. UVA10317- Equating Equations(回溯+剪枝)

    题目链接 题意:给出一个式子,但这个式子不一定是等式,在'+','-','='符号位置不变的情况下,又一次排列数字的位置,使其成为等式.假设能够的话.输出当中一种排列方式. 思路:我们将等号右边的数所 ...

  8. 轻松搞定RabbitMQ（三）——消息应答与消息持久化

    转自 http://blog.csdn.net/xiaoxian8023/article/details/48710653 这个官网的第二个例子中的消息应答和消息持久化部分.我把它摘出来作为单独的一块 ...

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

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

  10. mysql 较为高效的分页

    直接上代码 DaoImpl: /** * 开发转让页面展示 ,查询搜索数据,而且分页展示 * @param zrdp 搜索条件封装对象 * @return */ @SuppressWarnings(& ...