一个简单地svg绘制饼图的demo，代码如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title>chart</title>

        <style>

            #container {

                width: 400px;

                height: 400px;

            }

        </style>

    </head>

    <body>

        <div id="container"></div>

        <script>

            var data = [

                {name: '苹果', value: 5},

                {name: '香蕉', value: 10},

                {name: '橙子', value: 8},

                {name: '梨子', value: 16}

            ];

            myChartPie(

                document.getElementById('container'),

                data

            );

            function myChartPie(ele,data) {

                var rectx = 100;  //  x 半径

                var recty = 100;  //  y 半径

                var pointx = 200; // 圆心坐标x

                var pointy = 200; //圆心坐标y

                var pathhtml = '';

                var html = '<svg xlms="http://www.w3c.org/2000/svg" version="1.1" width="800" height="800">'

                var htmlclose = "</svg>";

                var count = 0;

                for (var j = 0;j < data.length;j++) {

                    count  = count + (data[j].value-0);

                }

                var cx = 200;  //起始点x

                var cy = 100;  //起始点y

                var cxto = 0;  //结束点x

                var cyto = 0;  // 结束点y

                var countsqrt = 0;

                for (var i = 0;i < data.length;i++) {

                    // 角度

                    countsqrt += data[i].value;

                    var sqrt = countsqrt / count;

                    if (data[i].value / count > 1 * 0.5) {

                        cxto = pointx + rectx * Math.sin(Math.PI * 2 * sqrt);

                        cyto = pointy - recty * Math.cos(Math.PI * 2 * sqrt);

                        pathhtml += '<path fill="' + MathColor(0,255) +  '" stroke="' + '#000' + '"d="' + 

                    'M ' + cx + ' ' + cy + ' ' +

                    'A ' + rectx + ' ' + recty + ' ' + '0 1 1 ' + cxto + '  ' + cyto + ' ' +

                    'L ' + pointx + ' ' + pointy + '  Z'

                    + '"></path>';

                    }else {

                        cxto = pointx + rectx * Math.sin(Math.PI * 2 * sqrt);

                        cyto = pointy - recty * Math.cos(Math.PI * 2 * sqrt);

                        pathhtml += '<path fill="' + MathColor(0,255) +  '" stroke="' + '#000' + '"d="' + 

                    'M ' + cx + ' ' + cy + ' ' +

                    'A ' + rectx + ' ' + recty + ' ' + '0 0 1 ' + cxto + '  ' + cyto + ' ' +

                    'L ' + pointx + ' ' + pointy + '  Z'

                    + '"></path>';

                    }

                    cx = cxto;

                    cy = cyto;

                }

                ele.innerHTML =  html + pathhtml + htmlclose;

            }

            function MathColor (x,y) {

                var r = Math.floor(Math.random() * (y-x + 1)) + x;

                var g = Math.floor(Math.random() * (y-x + 1)) + x;

                var b = Math.floor(Math.random() * (y-x + 1)) + x;

                return 'rgb(' + r + ',' + g + ',' + b + ')';

            }

        </script>

    </body>

</html>

svg绘制一个简单地饼图的更多相关文章

  1. opengl学习笔记（五）:组合变换，绘制一个简单的太阳系

    创建太阳系模型 描述的程序绘制一个简单的太阳系,其中有一颗行星和一颗太阳,用同一个函数绘制.需要使用glRotate*()函数让这颗行星绕太阳旋转,并且绕自身的轴旋转.还需要使用glTranslate ...

  2. Quartz2D之绘制一个简单的机器猫

    学习iOS有一段时间了,在博客园也默默的潜水了两个月,见识了很多大神,收获不少. 今天整理笔记,发现忘记的不少,我感觉需要及时的整理一下了,同时也把做的小东西贴上来和大家分享一下. 最近学习了Quar ...

  3. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  4. 如何使用openscad绘制一个简单的键帽.

    1 新建空项目 2测数据 测量得出数据.这个长方体的长宽高分别是1.6.4.6.8 注意,这三个数据并不是测量得到的数据,而且加了一点公差值(为3D打印做准备) 3画图 写代码 导入模型 为了方便以后 ...

  5. SVG绘制矩形简单示例分享

    最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分 1.简单矩形 效果图如下: 关键代码: <svg xmlns=" ...

  6. Unity3D学习笔记2——绘制一个带纹理的面

    目录 1. 概述 2. 详论 2.1. 网格(Mesh) 2.1.1. 顶点 2.1.2. 顶点索引 2.2. 材质(Material) 2.2.1. 创建材质 2.2.2. 使用材质 2.3. 光照 ...

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

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

  8. 如何用DAX实现查看每个月中不同类别排名前一位，以及一个简单的svg案例

    现在给大家带来的是如何用DAX实现查看每个月中不同类别的排名前一位,最终完成效果如下!!! 首先我们需要两张简单的表 基数表 和类别表 当我们创建好表之后,我们再创建一个表格,然后我们将类别表里的列值 ...

  9. VC6下OpenGL 开发环境的构建外加一个简单的二维网络棋盘绘制示例

    一.安装GLUT 工具包 GLUT 不是OpenGL 所必须的,但它会给我们的学习带来一定的方便,推荐安装. Windows 环境下的GLUT 本地下载地址:glut-install.zip(大小约为 ...

随机推荐

  1. java 日志脱敏框架 sensitive-v0.0.4 系统内置常见注解，支持自定义注解

    项目介绍 日志脱敏是常见的安全需求.普通的基于工具类方法的方式,对代码的入侵性太强.编写起来又特别麻烦. 本项目提供基于注解的方式,并且内置了常见的脱敏方式,便于开发. 特性 基于注解的日志脱敏. 可 ...

  2. qt qextserialport __imp_SetupDiGetDeviceRegistryPropertyW

    使用 qextserialport 编写串口助手的时候,提示找不到 __imp_SetupDiGetDeviceRegistryPropertyW,经过摸索有以下两种解决方法: 第一种: 把相应的源文 ...

  3. 【学习】Python进行数据提取的方法总结【转载】

    链接:http://www.jb51.net/article/90946.htm 数据提取是分析师日常工作中经常遇到的需求.如某个用户的贷款金额,某个月或季度的利息总收入,某个特定时间段的贷款金额和笔 ...

  4. 代码：PC CSS（工作中用）

    常规内容区域的:标题和文字 2016-5-23 .p16{font-size:16px;color:#333;}/* 16号#333的标题 */ .p12-gray{font-size:16px;co ...

  5. 设计一函数，求整数区间[a,b]和[c,d]的交集

    问题: 设计一函数,求整数区间[a,b]和[c,d]的交集.(c/c++.Java.Javascript.C#.Python)  1.Python: def calcMixed(a,b,c,d): r ...

  6. CentOS7虚拟机配置ip地址

    首先安装后的虚拟机选NAT模式配置vm的虚拟网络编辑器(vmware中的编辑),NAT模式中查看DHCP的范围,配置子网(写成和电脑一样),在linux中进入/etc/sysconfig/networ ...

  7. C++并发编程学习笔记

    // //  main.cpp //  test1 // //  Created by sofard on 2018/12/27. //  Copyright © 2018年 dapshen. All ...

  8. Jquery通过AJAX从后台获取数据显示在表格上（复选）

    代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...

  9. Grafana报警--通知渠道配置

    最近研究了prometheus+grafana的系统监控,使用grafana的报警功能,grafana支持很多种通知渠道,下文记录使用到的几种notification channels,分别是emai ...

  10. C语言典型编程1

    关于C的一些小而精的编程,适合希望提升编程能力的初学者学习:关键编程也就几句,但思维可以迁移到其他编程语言.同一问题,算法多种 //阶乘运算(有多种编写方式,编程需要看懂,更要打出来)#include ...