canvas制作饼图和环形图，使用Excanvas兼容IE67
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>
canvas制作饼图和环形图，使用Excanvas兼容IE67的更多相关文章
- Java 在Excel中添加分离型饼图、环形图
一.概述 Excel中可支持多种不同类型的图表,本文介绍如何绘制分离型饼图和环形图.其中,分离型饼图的绘制可分为整体分离型(即设置饼图分离程度)和局部分离(即设置点爆炸型值)两种情况.下面将以Java ...
- echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...
- canvas制作柱形图/折线图/饼状图，Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- echarts白色实心环形图（空心饼图）的编写
// 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取 ...
- html5实现饼图和线图
html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 ...
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
- Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏
Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...
- echarts实现环形图
前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...
- HTML5 canvas制作童年的回忆大风车
今天看到一篇CSS3写的大风车http://www.cnblogs.com/yaojaa/archive/2013/01/30/2882521.html,感觉CSS3太神奇了,这在以前用CSS是想都不 ...
随机推荐
- Java&Xml教程（五）使用SAX方式解析XML文件
Java SAX解析机制为我们提供了一系列的API来处理XML文件,SAX解析和DOM解析方式不太一样,它并不是將XML文件内容一次性全部加载,而是连续的部分加载. javax.xml.parsers ...
- ionic2\ionic3 自定义弹窗
ionic2及ionic3没有了popup及 其templateUrl属性 那我们如何对弹窗里加入自定义元素 从而达到自定义弹窗样式 那么就可以通过写h5页面来实现 自定义弹窗效果: 写个H5的弹窗及 ...
- redis集群——RPLR简笔(Redis+PostgreSQL+Linux(centos7)+RabbitMQ)
使用的是centos7. 1.下载最新redis源码,解压(2016-05-12最新版本为3.2.0,3.0及以上才有官方集群) 2.进入源码根目录(此目录下的redis-stable目录),找到ut ...
- -bash:whois:command not found
在centOS 下,如果出现-bash:whois:command not found的问题, 则yum install 安装whois软件 yum install -y jwhois 包名是jwho ...
- 将数据库中的内容展示出来并将某些value值转换成汉字
1.将数据库中的内容展示出来 前台代码未做改变,刚开始未显示的原因是因为 data-field 跟数据库不一样data-field 需要跟数据库中的一样才可以 2.将某些value值转换成汉字 在li ...
- C语言中的DEBUG
#cat aa.c #include <stdio.h> #include <stdarg.h> #include <stdlib.h> #include < ...
- python中zip( )的使用
zip函数简单用法 x = [1, 2, 3] y = [4, 5, 6] z = [7, 8, 9] xyz = zip(x,y,z) #得到一个zip对象 xyz #打印结果为<zip ob ...
- Django View（视图系统）
Django View 官方文档 一个视图函数(类),简称视图,是一个简单的 Python 函数(类),它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误 ...
- Problem 29
Problem 29 Consider all integer combinations of ab for 2 ≤ a ≤ 5 and 2 ≤ b ≤ 5: 仔细看看以下a与b的组合 22=4, 2 ...
- 2.5.3 简单的 echo 输出
echo的任务就是产生输出,可用来提示用户,或是用来产生数据供进一步处理. 原始的echo命令只会将参数打印到标准输出,参数之间以一个空格隔开,并以换行符号(newline)结尾. ...