js简单插件（饼形图）

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>饼图封装</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

<script src="jrChart.js"></script>
<script>var obj = {id:"container",width:500,height:300,data:[{name:"不及格",num:4,color:"red"},{name:"及格",num:13,color:"orange"},{name:"良好",num:30,color:"purple"},{name:"优秀",num:2,color:"green"},{name:"满分",num:1,color:"blue"}]}drawPie(obj);
</script>

引入名叫jrChart的js文件

function drawPie(obj) {var id = obj.id;var data = obj.data;var width = obj.width;var height = obj.height;var length = data.length;//获取每个数据所占的百分比var sum = 0;for(var i = 0;i < length;i++){sum = sum + data[i].num}console.log(sum);var container = document.getElementById(id);container.style.width = width + "px";container.style.height = height + "px";var canvas = document.createElement("canvas");canvas.width = width;canvas.height = height;canvas.style.border = "1px solid red";var cvs = canvas.getContext("2d");container.appendChild(canvas);var ox = width / 2;var oy = height/2;var or;if(width > height){or = height / 3;}else {or = width / 3;}var start = 0;var end = 0;var rates = [];for(var j = 0;j < length;j++){rates[j] = data[j].num / sum;end = start + Math.PI * 2 * (data[j].num / sum);cvs.beginPath();cvs.fillStyle = data[j].color;cvs.moveTo(ox,oy);cvs.arc(ox,oy,or,start,end);cvs.closePath();cvs.fill();start = end;}console.log(rates);var rectY = 0;for(var k = 0;k < length;k++){rectY = 20 * (k+1);cvs.beginPath();cvs.fillStyle = data[k].color;cvs.rect(20,rectY,25,13);cvs.fill();cvs.closePath();}var text = "";var textX = 60;var textY = 0;for(var m = 0;m<length;m++){text = data[m].name + (rates[m] * 100) + "%";textY = 20 * (m+1) + 12;cvs.beginPath();cvs.fillStyle = data[m].color;cvs.fillText(text,textX,textY,50);cvs.fill();cvs.closePath();}
}

结果如下

js简单插件（饼形图）相关推荐

java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...
Jquery提交表单 Form.js官方插件介绍
來源:http://hi.baidu.com/dereky/blog/item/f9e8ab64c52f4ff3f736540c.html [JQuery框架应用]:form.js官方插件介绍 For ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
html图片编辑器插件,js图片编辑器插件Filerobot
Filerobot是一款js图片编辑器插件.Filerobot可以对图片进行修改尺寸,剪裁,旋转,以及使用内置的滤镜对图片进行过滤. 使用方法在页面中引入下面的文件. 初始化插件 filerbot的 ...
原生js打印插件Print.js
网页打印功能在很多的网站系统中都会使用到.比如说报表打印功能等. 以下是在Jquery插件库中找到的一款原生js打印插件,代码清洁简单,封装的代码也很好理解. index.html页面代码 <! ...
支持移动触摸设备的简洁js幻灯片插件
lory是一款支持移动触摸设备的简洁的js幻灯片插件.该幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为 jquery插件来使用.该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用eas ...
零基础开发 Node.js Addons 插件：参数与返回值处理
上一篇回顾零基础开发 Node.js Addons 插件:Hello Node-API.本篇介绍使用 Node-API 为 Node.js 开发基于 C 的 Addons 时,如何接收与处理 Nod ...
非常不错的地区三级联动，js简单易懂。封装起来了（转）
非常不错的地区三级联动,js简单易懂.封装起来了首先需要引入area.js,然后配置并初始化插件: 例: <script src="js/ ...
推荐几个比较有意思的js效果插件
推荐几个比较有意思的js效果插件 wow.js 数字累加插件 CounterUp wow.js 这个东西很有意思,具体怎么有意思呢,就是你可以用很简单的方法引用它,然后通过加类名的方法就可以让你的网页 ...

js简单插件（饼形图）

js简单插件（饼形图）相关推荐

最新文章

热门文章