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 相关文章推荐
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
微信小程序App生命周期详解
Jan 31 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
JS中的继承操作实例总结
Jun 06 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判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python实现归并排序算法
2018/11/22 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python flask框架实现重定向功能示例
2019/07/02 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
python 实现逻辑回归
2020/12/30 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
入党介绍人评语
2014/05/06 职场文书
企业标语口号
2014/06/10 职场文书
个性车贴标语
2014/06/24 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2014年幼师工作总结
2014/11/22 职场文书
纪委立案决定书
2015/06/24 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
VUE递归树形实现多级列表
2022/07/15 Vue.js