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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <title>chart</title>
  9.         <style>
  10.             #container {
  11.                 width: 400px;
  12.                 height: 400px;
  13.             }
  14.         </style>
  15.     </head>
  16.  
  17.     <body>
  18.         <div id="container"></div>
  19.         <script>
  20.             var data = [
  21.                 {name: '苹果', value: 5},
  22.                 {name: '香蕉', value: 10},
  23.                 {name: '橙子', value: 8},
  24.                 {name: '梨子', value: 16}
  25.             ];
  26.             myChartPie(
  27.                 document.getElementById('container'),
  28.                 data
  29.             );
  30.             function myChartPie(ele,data) {
  31.                 var rectx = 100;  //  x 半径
  32.                 var recty = 100;  //  y 半径
  33.                 var pointx = 200; // 圆心坐标x
  34.                 var pointy = 200; //圆心坐标y
  35.                 var pathhtml = '';
  36.                 var html = '<svg xlms="http://www.w3c.org/2000/svg" version="1.1" width="800" height="800">'
  37.                 var htmlclose = "</svg>";
  38.                 var count = 0;
  39.                 for (var j = 0;j < data.length;j++) {
  40.                     count  = count + (data[j].value-0);
  41.                 }
  42.                 var cx = 200;  //起始点x
  43.                 var cy = 100;  //起始点y
  44.                 var cxto = 0;  //结束点x
  45.                 var cyto = 0;  // 结束点y
  46.                 var countsqrt = 0;
  47.                 for (var i = 0;i < data.length;i++) {
  48.                     // 角度
  49.                     countsqrt += data[i].value;
  50.                     var sqrt = countsqrt / count;
  51.                     if (data[i].value / count > 1 * 0.5) {
  52.                         cxto = pointx + rectx * Math.sin(Math.PI * 2 * sqrt);
  53.                         cyto = pointy - recty * Math.cos(Math.PI * 2 * sqrt);
  54.                         pathhtml += '<path fill="' + MathColor(0,255) +  '" stroke="' + '#000' + '"d="' + 
  55.  
  56.                     'M ' + cx + ' ' + cy + ' ' +
  57.                     'A ' + rectx + ' ' + recty + ' ' + '0 1 1 ' + cxto + '  ' + cyto + ' ' +
  58.                     'L ' + pointx + ' ' + pointy + '  Z'
  59.                     + '"></path>';
  60.                     }else {
  61.                         cxto = pointx + rectx * Math.sin(Math.PI * 2 * sqrt);
  62.                         cyto = pointy - recty * Math.cos(Math.PI * 2 * sqrt);
  63.                         pathhtml += '<path fill="' + MathColor(0,255) +  '" stroke="' + '#000' + '"d="' + 
  64.  
  65.                     'M ' + cx + ' ' + cy + ' ' +
  66.                     'A ' + rectx + ' ' + recty + ' ' + '0 0 1 ' + cxto + '  ' + cyto + ' ' +
  67.                     'L ' + pointx + ' ' + pointy + '  Z'
  68.                     + '"></path>';
  69.                     }
  70.                     cx = cxto;
  71.                     cy = cyto;
  72.                 }
  73.                 ele.innerHTML =  html + pathhtml + htmlclose;
  74.             }
  75.             function MathColor (x,y) {
  76.                 var r = Math.floor(Math.random() * (y-x + 1)) + x;
  77.                 var g = Math.floor(Math.random() * (y-x + 1)) + x;
  78.                 var b = Math.floor(Math.random() * (y-x + 1)) + x;
  79.                 return 'rgb(' + r + ',' + g + ',' + b + ')';
  80.             }
  81.         </script>
  82.     </body>
  83.  
  84. </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. mybatis入门篇：Mybatis高级查询

    1.ResultMap的association与collection association与collection功能类似,区别是一对一与一对多,这里以association为例. 首先说明一下需求: ...

  2. 【转载】 github vue 高星项目

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  3. Jupyter 常用快捷键

    Command Mode Y : change cell to code M : change cell to markdown R : change cell to raw K : select c ...

  4. mysql 动态行转列

    表结果:create table user( id int , username ), create_time datetime, type int ) insert into user (`id`, ...

  5. kylin配置

    hadoop 2.7.4,hive 2.1.1,hbase 1.4.4 配置好的情况下 下载apache-kylin-2.1.0-bin-hbase1x.tar.gz 解压后,配置环境变量 expor ...

  6. 看Spring注解之IOC记录

    首先看源码里有些是java的元注解记录的有如下几个: @Inherited注释:指明被注解的类会自动继承.更具体地说,如果定义注解时使用了 @Inherited 标记,然后用定义的注解来标注另一个父类 ...

  7. ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction解决办法

    一.问题描述: 同事反馈线上一个表有其中一条数据无法删除,其他都正常,我拿到删数据的sql,尝试执行,报错如下: mysql> delete from facebook_posts where ...

  8. jmeter+ant+jekins的持续集成自动化搭建-基于虚拟机的linux系统

    准备软件: 1.ant压缩包,2.jmeter压缩包,3.jenkins的war包压缩包,4.tomcat压缩包,5.build.xml文件,6.jmeter生成的***.jmx格式文件. 基本原理: ...

  9. Suse linux enterprise 11安装时更改磁盘模式为gpt的方法

    在进行鸟哥linux基础篇学习时,在"第3.2.2 选择安装模式与开机 -inst.gpt"中,鸟哥用到的CentOS 7需要用指令修改磁盘模式为gpt. 先用键盘选择Instal ...

  10. Centos6.3下搭建apache+https服务

    1. 安装插件 yum install mod_ssl openssl openssl-devel --downloadonly --downloaddir=/home/https 2.生成私钥 op ...