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学习第三章 早期的事件处理程序
Feb 07 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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旋转图片90度的方法
2013/11/07 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
用JS实现的一个include函数
2007/07/21 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
python如何修改装饰器中参数
2018/03/20 Python
python中的变量如何开辟内存
2018/06/26 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
原生python实现knn分类算法
2019/10/24 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
建筑施工安全责任书
2014/07/24 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
投资入股合作协议书
2014/10/28 职场文书
2014年会计工作总结
2014/11/27 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
2015年党员承诺书
2015/01/21 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
深入理解go slice结构
2021/09/15 Golang