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的更多相关文章

  1. Java 在Excel中添加分离型饼图、环形图

    一.概述 Excel中可支持多种不同类型的图表,本文介绍如何绘制分离型饼图和环形图.其中,分离型饼图的绘制可分为整体分离型(即设置饼图分离程度)和局部分离(即设置点爆炸型值)两种情况.下面将以Java ...

  2. echart 折线图、柱状图、饼图、环形图颜色修改

    之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...

  3. canvas制作柱形图/折线图/饼状图，Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. echarts白色实心环形图（空心饼图）的编写

    // 数据接入机构统计let myDom = document.getElementById('myChart');let myWidth = myDom.offsetWidth - 5; // 获取 ...

  5. html5实现饼图和线图

    html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话:     人生是一个不断做加法的过程     从赤条条无牵无挂的来     到学会荣辱羞耻 ...

  6. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  7. Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

    Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...

  8. echarts实现环形图

    前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...

  9. HTML5 canvas制作童年的回忆大风车

    今天看到一篇CSS3写的大风车http://www.cnblogs.com/yaojaa/archive/2013/01/30/2882521.html,感觉CSS3太神奇了,这在以前用CSS是想都不 ...

随机推荐

  1. [转]STL之deque容器详解

    Deque 容器 deque容器是C++标准模版库(STL,Standard Template Library)中的部分内容.deque容器类与vector类似,支持随机访问和快速插入删除,它在容器中 ...

  2. 【PostgreSQL-9.6.3】事件触发器

    当预定的事件发生时,事件触发器就会被触发.由于事件触发器设计的权限比较大,所以只有超级用户才能创建和修改触发器. 1. 事件触发器支持的事件分三类:ddl_command_start, ddl_com ...

  3. js案例分析

    名字取的高大上,其实只是我平时上网浏览遇到的一些我感觉还不错的小题目,再加上我或者是我在网上找到的一些理解,就保存到这里了. 2019/4/2  最新开了个新坑,是一个javascipt30的一些案例 ...

  4. proxy 跨域配置, 针对有axios的baseURL

    1.首先主要的config文件下的index.js中的proxytable配置 proxyTable:{ '/proxy': { target:'http://192.168.2.141:8080', ...

  5. 小白神器 - 一篇博客学会HTML

    小白神器 - 一篇博客学会HTML 一. 简介 1. HTML 定义 htyper text markup language  即超文本标记语言. 超文本: 就是指页面内可以包含图片.链接,甚至音乐. ...

  6. Huawei-R&S-网络工程师实验笔记20190530-FTP上传下载、STelnet登录、SFTP登录

    >Huawei-R&S-网络工程师实验笔记20190530-FTP上传下载.STelnet登录.SFTP登录 >>实验开始,参考<Huawei-R&S-网络工程 ...

  7. 【MFC Programming】 Using Dialog To Set A Correlate Menu

    This blog will show how to display a menu we designed in a dialog. 1.Insert a new dialog& a new ...

  8. 清北学堂模拟赛d6t2 刀塔

    分析:看到最小值最大就很显然是二分了吧,二分一下最小值,把小于它的数给删掉,然后看每个数向左边能延伸多长,往右边能延伸多长,最后统计一下有没有可行答案就可以了. #include <cstdio ...

  9. 文件描述符 VS 文件句柄

    文件描述符 VS 文件句柄 文件描述符是标准 C 里用的,是 int 型的,比如调用 open 函数成功后会返回一个与当前文件相关联的 int 型数字. 文件句柄是 Windows 里用的,是 HAN ...

  10. F2BPM 开发Api与RESTfull应用服务Api 层次关系及示例

    目前越来越多的企业架构解决方案更加趋向于基于http协议“微服务”访问跨系统调用,而不使用统传的WebService调用,即通过RESTfull方式进行交互,更加轻量整合调用更加方便.本文档中所有F2 ...