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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
详解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
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Puppeteer使用示例详解
2019/06/20 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python如何读写CSV文件
2020/08/13 Python
python 调整图片亮度的示例
2020/12/03 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
员工工作表现评语
2014/04/26 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
第二次离婚起诉书
2015/05/18 职场文书
承兑汇票延期证明
2015/06/23 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
欢送领导祝酒词
2015/08/12 职场文书
课改心得体会范文
2016/01/25 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python