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 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
angular多语言配置详解
May 16 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
求高于平均分的学生学号及成绩
2016/09/01 面试题
2016年学校招生广告语
2016/01/28 职场文书