java圆饼图插件_饼图----插件
(function( w ) {
// 角度转换为弧度
function angleToRadian( angle ) {
return Math.PI / 180 * angle;
}
/*
* constructor { PipeChart } 饼图构造函数
* param { ctx: Context } 绘图上下文
* param { data: Array } 绘制饼图所需的数据
* param { x: number } 圆心x坐标
* param { y: number } 圆心y坐标
* param { r: number } 饼图半径
* */
function PipeChart( ctx, data, x, y, r ) {
this.ctx = ctx;
this.data = data;
this.x = x;
this.y = y;
this.r = r;
// 文字衬托线到圆的距离
this.lineSpace = 20;
// 扇形和文字的杨色
this.colors =
'blue,hotpink,green,deeppink,ivory,skyblue,lavender,lavenderblush'
.split(',');
// 把数据转换为对应的角度
this.processData();
}
// 置换原型
PipeChart.prototype = {
constructor: PipeChart,
// 绘制饼图
draw: function() {
this.drawPipe();
this.drawText();
},
// 根据数据转换成对应的角度
processData: function() {
/*
* 实现思路:
* 1、求单位数据所占用的角度 ==> 360 / 数据总和
* 2、使用单位数据所占用角度 * 每一份数据值得到每一份
数据所占用的角度
* 3、把计算好的角度使用一个数据存储起来,供其他方法使
用
* */
var self = this;
// 求数据总和
var num = 0;
this.data.forEach( function( obj ) {
num += obj.val;
});
// 求单位数据所占用的角度
var unitAngle = 360 / num;
// 用来存储数据所占用饼图的角度
this.processArr = [];
this.data.forEach( function( obj ) {
// 这里的this不是饼图实例,所以使用self
self.processArr.push( unitAngle * obj.val );
});
},
// 绘制饼中的扇
drawPipe: function() {
// 扇形默认起点和结束点
var startAngle = 0;
var endAngle = 0;
/*
* 实现思路:
* 1、遍历所有计算好的角度
* 2、beginPath、moveTo到饼图圆心
* 3、画对应扇形的弧
* 3.1、弧的起点位置 = 上一个弧的结束点
* 3.2、弧的结束点位置 = 上一个弧的结束点 + 自己的角度
* 4、closePath
* 5、修改填充色
* 6、fill
* */
// 遍历所有计算好的角度,绘制成不同颜色的扇形
for( var i = 0, len = this.processArr.length; i < len;
i++ ) {
// 当前扇形弧的起点位置 = 上一个扇形弧的结束点
// 当前扇形弧的结束点位置 = 上一个扇形弧的结束点 +
自己扇形所占用的角度
startAngle = endAngle;
endAngle = endAngle + this.processArr[i];
this.ctx.beginPath();
this.ctx.moveTo( this.x, this.y );
this.ctx.arc( this.x, this.y, this.r,
angleToRadian( startAngle ), angleToRadian( endAngle ) );
this.ctx.closePath();
this.ctx.fillStyle = this.colors[ i ];
this.ctx.fill();
}
},
// 绘制文字
drawText: function() {
// 扇形默认起点和结束点
var startAngle = 0;
var endAngle = 0;
// 扇形平分线的角度
var lineAngle = 0;
var lineX = 0;
var lineY = 0;
// 遍历所有计算好的角度,绘制成不同颜色的扇形
for( var i = 0, len = this.processArr.length; i < len;
i++ ) {
// 当前扇形弧的起点位置 = 上一个扇形弧的结束点
// 当前扇形弧的结束点位置 = 上一个扇形弧的结束点 +
自己扇形所占用的角度
startAngle = endAngle;
lineAngle = startAngle + this.processArr[i] / 2;
endAngle = endAngle + this.processArr[i];
/*
* 求平分线的x&y坐标
* x: 圆心x + r * Math.cos( angleToRadian(45) )
* y: 圆心y + r * Math.sin( angleToRadian(45) )
* */
lineX = this.x + (this.r + this.lineSpace) *
Math.cos( angleToRadian(lineAngle) );
lineY = this.y + (this.r + this.lineSpace) *
Math.sin( angleToRadian(lineAngle) );
// 画扇形平分线
this.ctx.beginPath();
this.ctx.moveTo( this.x, this.y );
this.ctx.lineTo( lineX, lineY );
this.ctx.strokeStyle = this.colors[i];
this.ctx.stroke();
// 添加文字描述
if( lineAngle >= 90 & lineAngle <= 270 ) {
this.ctx.textAlign = 'right';
this.ctx.moveTo( lineX, lineY );
this.ctx.lineTo( lineX - this.ctx.measureText(
this.data[i].msg ).width, lineY );
}else {
this.ctx.textAlign = 'left';
this.ctx.moveTo( lineX, lineY );
this.ctx.lineTo( lineX + this.ctx.measureText(
this.data[i].msg ).width, lineY );
}
this.ctx.textBaseline = 'bottom';
this.ctx.fillStyle = this.colors[i];
this.ctx.fillText( this.data[i].msg, lineX, lineY
- 5 );
this.ctx.stroke();
}
}
};
// 给原型添加一个饼图插件方法
jQuery.fn.extend({
// 在第一个元素中,按照指定的数据绘制饼图
pipeChart: function( data ) {
/*
* 实现思路:
* 1、动态创建canvas元素,并且获取绘图环境
* 2、获取第一个元素的大小,按照这个大小动态设置画布的
大小
* 3、创建饼图对象,调用draw方法绘制
* 4、把绘制好的画布添加到第一个元素中
* */
// 创建canvas,获取ctx
var $cvs = $('');
var ctx = $cvs.get(0).getContext( '2d' );
var $first = this.first();
var width = parseInt( $first.css( 'width' ) );
var height = parseInt( $first.css( 'height' ) );
// 根据元素大小动态设置画布大小
$cvs.attr({
width: width,
height: height
});
// 计算饼图半径,圆心
var r = width > height? height / 2: width / 2;
var x = width / 2;
var y = height / 2;
// 根据数据绘制饼图
var pipeChart = new PipeChart( ctx, data, x, y, r - 50
);
pipeChart.draw();
// 把绘制好的画布添加到第一个元素中
$first.append( $cvs );
}
})
}( window ));
java圆饼图插件_饼图----插件相关推荐
- java中jsp时间插件_日期插件 - WEB源码|JSP源码/Java|源代码 - 源码中国
日期插件\My97DatePicker\calendar.js 日期插件\My97DatePicker\lang\en.js 日期插件\My97DatePicker\lang\zh-cn.js 日期插 ...
- whmcs对接ep插件_金盾插件对接whmcs
DCIM允许客户端使用金盾插件,下载.安装并配置whcms插件,然后激活后客户也可使用金盾插件. 注:需先在DCIM系统激活启用金盾插件.详情请参看:>> DCIM设置金盾插件 一.whm ...
- logstash java插件_[logstash-input-log4j]插件使用详解
Log4j插件可以通过log4j.jar获取Java日志,搭配Log4j的SocketAppender和SocketHubAppender使用,常用于简单的集群日志汇总. 最小化的配置 input { ...
- java flash 播放器_视频播放插件Video.js
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.(要支持 ...
- 全注解怎么使用分页插件_分页插件使用的方式
分页插件使用的方式 修改 pom 文件,添加分页 jar 包依赖 修改 mybatis.xml 文件 UserDao 接口,UserMapper.xml 添加对应方法与实现 sql 对应 UserSe ...
- vscode卸载background插件_使用插件一键启用 Visual Studio Code 的毛玻璃效果
本文原文发布于我的博客 https://eyhn.in 上一次 我介绍了使用 "Custom CSS and JS Loader" 插件为 MacOS 开启毛玻璃效果.现在我把它做 ...
- 定义跳转插件_虚幻插件Review:Logic Driver Pro 终极状态机插件
获取与安装 虚幻商城Logic Driver Pro地址 这是老王在虚幻商城出的第一滴血,99.99大刀,这个插件还有一个Lite版34.99刀.昨天刚购入,目前研究了一下基本工作逻辑,感觉还是很满意 ...
- STS插件_ springsource-tool-suite插件各个历史版本
目前spring官网(http://spring.io/tools/sts/all)上可下载的spring插件只有:springsource-tool-suite-3.8.4(sts-3.8.4).但 ...
- batchplot 3.6.2 插件_直播插件体系设计
| 导语 直播页面是一个功能丰富且复杂的页面,整个页面几乎全部由若干个功能组件构成,在这样一个背景下,如何通过前期的合理设计来接入这些功能组件,同时提高页面的扩展性和可维护性. 一.背景 开播了鹅 ...
最新文章
- 排序算法--睡眠排序
- Harris算子的运用 用于图像配准
- java对象是 什么的集合_java持有对象-集合类
- python封装一个效率极高的 批量更新、插入合一的工具
- 思科交换机PXE响应巨慢,甚至无响应问题
- [label][转载][JavaSript]querySelectorAll 方法相比 getElementsBy 系列方法有什么区别?
- Centos6.x搭建lnmp环境
- gridview汇出EXCEL (ExportGridViewToExcel(dt, HttpContext.Current.Response);)
- File类的构造方法
- qq邮箱使用outlook 2007
- ASCII中关于大小写字母间隔为32的思考
- 头条白板面试_如何在白板上组织您的想法并粉碎技术面试
- Linux下用多种模式实现双网卡绑定!
- 老板不在,你不得不做出越权的决定,咋办?(考试题系列)
- 2014牡丹江——Hierarchical Notation
- 数据库分类及主流数据库对比
- 计算机转游戏,利用双计算机调试游戏程序 (转)
- 频域采样与恢复matlab实验,实验二 时域采样与频域采样及MATLAB程序
- android 随手记 摄像头录像
- 服务器RAID常见级别与JBOD概述
热门文章
- leetcode 687. Longest Univalue Path | 687. 最长同值路径(树形dp)
- leetcode 304. Range Sum Query 2D - Immutable |304. 二维区域和检索 - 矩阵不可变(二维前缀和问题)
- leetcode 111. 二叉树的最小深度
- Java 把一个InputStream转换为一个BufferedReader
- Leet Code OJ 83. Remove Duplicates from Sorted List [Difficulty: Easy]
- 安卓学习 之 bitmap用法
- 容器源码分析之HashTable(八)
- Spring之高级装配(二)
- elasticsearch index doc过程概述
- 03.elasticsearch pipeline aggregation查询