JS+canvas动态绘制饼图的方法示例


Posted in Javascript onSeptember 12, 2017

本文实例讲述了JS+canvas动态绘饼图的方法。分享给大家供大家参考,具体如下:

运行效果图如下:

JS+canvas动态绘制饼图的方法示例

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com canvas饼状图</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
  var colors = (function () {
    return ( "aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue," +
    "blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk," +
    "crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta," +
    "darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray," +
    "darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick," +
    "floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey," +
    "honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon," +
    "lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink," +
    "lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow," +
    "lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple," +
    "mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue," +
    "mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid," +
    "palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue," +
    "purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna," +
    "silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent," +
    "tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen" ).split(',');
  })();
  function Bing(obj) {
    this.start = 0;
    for(var key in obj){
      this[key] = obj[key];
    }
    this.init();
  }
  Bing.prototype = {
    init: function () {
      this.handle();
      this.render(this.data2);
      this.drawText();
    },
    /**
     * 渲染页面
     * @param obj
     * @param i
     */
    render: function (obj) {
      //3、计算每一个扇形的起始弧度和结束弧度
      this.data2.forEach(function (v, i) {
        var obj = {};
        //第一个扇形的起始弧度:start 结束:start+第一个扇形占据的弧度差
        obj.start = this.start;
        obj.end = this.start + v.radian;
        this.start += v.radian;
        //绘制扇形
        this.ctx.beginPath();
        this.ctx.moveTo(300, 300);
        this.ctx.arc(300, 300, 150, obj.start, obj.end);
        this.ctx.fillStyle = colors[i * 15];
        this.ctx.fill();
      }, this);
    },
    /**
     * 处理数据
     */
    handle:function(){
      var sum = 0;
      this.data.forEach(function (v) {
        sum += v;
      });
      //2、计算每一个数据所占的比重
      this.data2 = this.data.map(function (v) {
        var obj = {};
        obj.number = v;
        obj.ratio = v / sum;//每个数据占据的比重
        obj.radian = 2 * Math.PI * v / sum;//该扇形所占据的弧度
        obj.start = this.start;
        obj.end = this.start + obj.radian;
        this.start = obj.end;
        return obj;
      },this);
    },
    drawText:function(){
      this.ctx.font = "30px 微软雅黑";
      this.ctx.fillStyle = 'red';
      this.data2.forEach(function(obj){
        //计算文字所在的弧度
        r2 = obj.start + obj.radian/2;
        //就按相对于圆心文字偏移的位置
        b = this.r*Math.cos(r2);
        h = this.r*Math.sin(r2);
        //文字的位置
        var x2 = this.x + b;
        var y2 = this.y + h;
        this.ctx.fillText(obj.number,x2,y2);
      },this);
    }
  };
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var data = [1, 3, 5, 7, 9];
  var bing = new Bing({
    ctx:ctx,
    x:300,
    y:300,
    r:150,
    data:data
  });
</script>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript event 事件解析
Jan 31 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
vue实现搜索过滤效果
May 28 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
详解react-router4 异步加载路由两种方法
Sep 12 #Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 #Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 #Javascript
Angular 4.0学习教程之架构详解
Sep 12 #Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 #jQuery
详解vue axios中文文档
Sep 12 #Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
详解flask表单提交的两种方式
2018/07/21 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
教师个人鉴定材料
2014/02/08 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
python pygame 开发五子棋双人对弈
2022/05/02 Python