一个简单地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. 基础总结(01)--css清除浮动几种方法

    1.父元素添加overflow:auto/hidden; 2.父元素内加空div,添加样式clear:both; 3.父元素添加伪类; .parent:after{ content:''; displ ...

  2. python类特列方法使用

    class Rgc(object): def __new__(cls, *args, **kwargs): print('在类通过__new__方法实例化一个对象') return super(Rgc ...

  3. vue富文本编辑器

    基于webpack和vue 一.npm 安装 vue-quill-editor 二.在main.js中引入 import VueQuillEditor from 'vue-quill-editor'/ ...

  4. WPF DEV gridcontrol当前项的数据导出为mdb文件

    /// <summary> /// 导出为mdb /// </summary> /// <param name="sender"></pa ...

  5. 使用DatagramSocket和DatagramPacket进行简单的通信

    DatagramSocket此类表示用来发送和接收数据报包的套接字. DatagramPacket此类表示数据报包. package cn.sxt.UdpDemo; import java.io.IO ...

  6. 【HDFS API编程】删除文件

    所有操作都是以fileSystem为入口进行,我们使用fileSystem下的delete方法进行删除文件操作,删除的时候必须慎重. 直接上代码: /** * 删除文件 * @throws Excep ...

  7. python爬虫相关

    一.Python re模块的基本用法: https://blog.csdn.net/chenmozhe22/article/details/80601971 二.爬取网页图片 https://www. ...

  8. 远程git仓库的搭建

    具体的操作见另一篇 第一部分: 安装 1. 下载地址:  https://git-scm.com/download/win; 如果速度慢, 使用 迅雷下载; 2. 点击安装, 然后下一步, 直到下面这 ...

  9. 对BRD、MRD、PRD、FSD四类产品文档的理解

    查阅相关文献并总结了在产品生命周期内比较重要的四类文档—BRD.MRD.PRD.FSD各自的含义以及用法. BRD 1.含义:BRD(business requirement document)— 商 ...

  10. node图片资源捉取

    开头先简单说明一下,因为网络资源上最多的资源就是图片,所以在这里也只简单的捉取了图片资源,至于其他的文档,音乐等我是没有试过的.所以暂时还是以图片为案例!!! Step1 首先我们需要加载我们需要的资 ...