canvas制作饼图和环形图,使用Excanvas兼容IE67
2024-08-29 04:53:33
excanvas 地址:http://excanvas.sourceforge.net/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas</title>
<style>
</style> <!--[if lte IE 9]>
<script src="../html5shiv.js"></script>
<script src="excanvas.js"></script>
<script src="../jquery-1.11.0.min.js"></script>
<!--[if gt IE 9]><!-->
<script src="../jquery-2.1.0.min.js"></script>
<![endif]-->
</head> <body>
<canvas id="pie" width="100" height="100" data-ratio="0.65_0.15_0.20" ></canvas>
<canvas class="doughnut" width="100" height="100" data-ratio="0.66_0.34"></canvas>
<script>
(function($){
$.fn.extend({
pieChart: function(o){
this.each(function(m, n){
var target = $(n),
ratio = target.data('ratio').split('_'),
colors = o.colors,
ctx = n.getContext('2d'),
center = Math.floor(target.height()/2), //圆心
radius = center - (o.borderWidth || 0), //半径
startAngle = Math.PI * 1.5, //起始弧度
endAngle = Math.PI * 1.5; //结束弧度 ctx.fillStyle = o.borderCorlor || '#ffffff';
ctx.arc(center, center, center, 0, Math.PI * 2, true);
ctx.fill(); $.each(ratio, function(i, v){
endAngle = endAngle - v * Math.PI * 2; //结束弧度
ctx.fillStyle = colors[i];
ctx.beginPath(); ctx.moveTo(center, center); //移动到到圆心
ctx.arc(center, center, radius, startAngle, endAngle, true);
ctx.closePath();
ctx.fill(); if(o.stroke){
ctx.strokeStyle = o.stroke.color || '#ffffff';
ctx.lineWidth = o.stroke.width || 1;
ctx.stroke();
}
startAngle = endAngle; //设置起始弧度
});
}); }, doughnutChart: function(o){
this.each(function(m, n){
var target = $(n),
ratio = target.data('ratio').split('_'),
colors = o.colors,
ctx = n.getContext('2d'),
center = Math.floor(target.height()/2),
radius = center,
startAngle = Math.PI * 1.5,
endAngle = Math.PI * 1.5; $.each(ratio, function(i, v){
//弧度 = 角度 * Math.PI / 180
//v*360*Math.PI/180 = v * Math.PI * 2
endAngle = endAngle - v * Math.PI * 2;
ctx.fillStyle = colors[i];
ctx.beginPath(); ctx.moveTo(center, center);
ctx.arc(center, center, radius, startAngle, endAngle, true);
ctx.closePath();
ctx.fill();
startAngle = endAngle;
}); ctx.fillStyle = o.centerColor;
ctx.beginPath();
ctx.arc(center, center, radius-o.borderWidth, 0, Math.PI * 2, true);
ctx.fill();
});
}
}); $(window).on('load', function(){
$('#pie').pieChart({
colors: ['#7cb228', '#abd667', '#ededed'],
borderWidth: 2,
borderCorlor: '#7cb228'
// stroke: {
// color: '#ff0000',
// width: 2
// }
}); $('.doughnut').doughnutChart({
colors: ['#7cb228', '#ededed'],
centerColor: '#ffffff',
borderWidth: 10
});
});
})(jQuery); </script>
</body>
</html>
最新文章
- VMWare Tools 和 Shared folder(共享文件夹)
- windows或mac上对iOS设备截图
- Win10家庭版升级专业版密钥
- python bytes to string
- QML Image: Cannot open: qrc:///new.pic.png
- oracle方案是什么?
- AC日记——计算多项式的导函数 openjudge 1.5 38
- SpringMVC中的设计模式
- git merge 与 rebase 的区别
- android 根据包名打开app程序
- (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO
- centos7扩展磁盘空间
- vc关于文件拷贝
- Kaggle Competition Past Solutions
- 【原】Spring和Dubbo整合案例和过程
- 【转载】Linux的inode的理解
- ZOJ 1940 Dungeon Master【三维BFS】
- 编写CentOS的System V init启动脚本
- JPA查询单个字段和多个字段返回类型总结
- gulp监听文件变化,并拷贝到指定目录(转)---参考记录