慕课网实战—《用组件方式开发 Web App全站 》笔记七-饼图和环图组件开发

最新推荐文章于 2023-12-18 18:48:44 发布
最新推荐文章于 2023-12-18 18:48:44 发布
阅读量4.3k 收藏 1
点赞数
分类专栏： Web开发 文章标签： web app html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lovejulyer/article/details/51925513
版权
本文介绍了如何使用HTML5、CSS3和JavaScript进行组件化开发，特别是聚焦于饼图和环图组件的创建。详细讲解了饼图的绘制准备、绘制过程、动画效果和文本注入，以及环图的实现步骤，包括环图的特殊格式化、配置和样式调整。通过实例展示了如何在HTML和CSS中应用这些技术。
摘要由CSDN通过智能技术生成

运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！
《用组件方式开发 Web App全站 》

饼图开发（绘制饼图准备）

  • 饼图实现原理
    这里写图片描述

饼图开发（绘制饼图）

  • 代码
/* 饼图组件对象 */

var H5ComponentPie =function ( name, cfg ) {
  var component =  new H5ComponentBase( name ,cfg );

  //  绘制网格线 - 背景层
  var w = cfg.width;
  var h = cfg.height;

  //  加入一个画布（网格线背景）
  var cns = document.createElement('canvas');
  var ctx = cns.getContext('2d');
  cns.width = ctx.width = w;
  cns.height = ctx.height =h;
  $(cns).css('zIndex',1);
  component.append(cns);

  var r =w/2;

  //  加入一个底图层
  ctx.beginPath();
  ctx.fillStyle='#eee';
  ctx.strokeStyle='#eee';
  ctx.lineWidth = 1;
  ctx.arc(r,r,r,0,2*Math.PI);
  ctx.fill();
  ctx.stroke();

  //  绘制一个数据层
  var cns = document.createElement('canvas');
  var ctx = cns.getContext('2d');
  cns.width = ctx.width = w;
  cns.height = ctx.height =h;
  $(cns).css('zIndex',2);
  component.append(cns);

  var colors = ['red','green','blue','#a00','orange']; //  备用颜色
  var sAngel = 1.5 * Math.PI; //  设置开始的角度在 12 点位置
  var eAngel = 0; //  结束角度
  var aAngel = Math.PI*2; //  100%的圆结束的角度 2pi = 360


  var step = cfg.data.length;
  for(var i=0;i<step;i++){

    var item  = cfg.data[i];
    var color = item[2] || ( item[2] = colors.pop() );

    eAngel = sAngel + aAngel * item[1];

    ctx.beginPath();
    ctx.fillStyle=color;
    ctx.strokeStyle=color;
    ctx.lineWidth = .1;

    ctx.moveTo(r,r);
    ctx.arc(r,r,r,sAngel,eAngel);
    ctx.fill();
    ctx.stroke();
    sAngel = eAngel;


    //  加入所有的项目文本以及百分比

    var text = $('<div class="text">');
    text.text( cfg.data[i][0] );
    var per =  $('<div class="per">');
    per.text( cfg.data[i][1]*100 +'%'  );
    text.append(per);

    var x = r + Math.sin( .5 * Math.PI - sAngel ) * r;
    var y = r + Math.cos( .5 * Math.PI - sAngel ) * r;

    // text.css('left',x/2);
    // text.css('top',y/2);

    if(x > w/2){
      text.css('left',x/2);
    }else{
      text.css('right',(w-x)/2);
    }
    if(y > h/2){
      text.css('top',y/2);
    }else{
      text.css('bottom',(h-y)/2);
    }
    if( cfg.data[i][2] ){
      text.css('color',cfg.data[i][2]); 
      // text.css('color','#fff'); 
      // text.css('backgroundColor',cfg.data[i][2]); 
    }
    text.css('opacity',0);
    component.append(text);

  }

   //  加入一个蒙板层
  var cns = document.createElement('canvas');
  var ctx = cns.getContext('2d');
  cns.width = ctx.width = w;
  cns.height = ctx.height =h;
  $(cns).css('zIndex',3);
  component.append(cns);


  ctx.fillStyle='#eee';
  ctx.strokeStyle='#eee';
  ctx.lineWidth = 1;

}
  • 实现效果
    这里写图片描述

饼图开发（绘制饼图动画）

//  生长动画

  var draw = function( per ){

    ctx.clearRect(0,0,w,h);

    ctx.beginPath();

    ctx.moveTo(r,r);

    if(per <=0){
      ctx.arc(r,r,r,0,2*Math.PI);
      component.find('.text').css('opacity',0)
    }else{
      ctx.arc(r,r,r,sAngel,sAngel+2*Math.PI*per,true);
    }

    ctx.fill();
    ctx.stroke();

    if( per >= 1){
      component.find('.text').css('transition','all 0s');
      H5ComponentPie.reSort( component.find('.text') );
      component.find('.text').css('transition','all 1s');
      component.find('.text').css('opacity',1);
      ctx.clearRect(0,0,w,h);
    }
  }
  draw(0);

  component.on('onLoad',function(){
    //  饼图生长动画
      var s = 0;
      for( i=0;i<100;i++){
        setTimeout(function(){
            s+=.01;
            draw(s);
        },i*10+500);
      }
  });
  component.on('onLeave',function(){
    //  饼图退场动画
      var s = 1;
      for( i=0;i<100;i++){
        setTimeout(function(){
            s-=.01;
            draw(s);
        },i*10);
      }
  });

  return component;
}

饼图开发（项目文本注入）

//  重排项目文本元素
H5ComponentPie.reSort = function( list ){

  //  1. 检测相交
  var compare = function( domA, domB ){

    //  元素的位置，不用 left，因为有时候 left为 auto
    var offsetA = $(domA).offset();
    var offsetB = $(domB).offset();

    //  domA 的投影
    var shadowA_x = [ offsetA.left,$(domA).width()  + offsetA.left ];
    var shadowA_y = [ offsetA.top ,$(domA).height() + offsetA.top ];

    //  domB 的投影
    var shadowB_x = [ offsetB.left,$(domB).width()  + offsetB.left ];
    var shadowB_y = [ offsetB.top ,$(domB).height() + offsetB.top  ];

    //  检测 x
    var intersect_x = ( shadowA_x[0] > shadowB_x[0] && shadowA_x[0] < shadowB_x[1] ) || ( shadowA_x[1] > shadowB_x[0] &&  shadowA_x[1] < shadowB_x[1]  );

    //  检测 y 轴投影是否相交
    var intersect_y = ( shadowA_y[0] > shadowB_y[0] && shadowA_y[0] < shadowB_y[1] ) || ( shadowA_y[1] > shadowB_y[0] &&  shadowA_y[1] < shadowB_y[1]  );
    return intersect_x && intersect_y;
  }


  //  2. 错开重排
  var reset = function( domA, domB ){

    if( $(domA).css('top') != 'auto' ){

      $(domA).css('top', parseInt($(domA).css('top')) + $(domB).height() );
    }
    if( $(domA).css('bottom') != 'auto' ){

      $(domA).css('bottom', parseInt($(domA).css('bottom')) + $(domB).height() );
    }

  }

  //  定义将要重排的元素
  var willReset = [list[0]];

  $.each(list,function(i,domTarget){
    if( compare(willReset[willReset.length-1] , domTarget ) ){
      willReset.push(domTarget);  //  不会把自身加入到对比
    }
  });

  if(willReset.length >1 ){
      $.each(willReset,function(i,domA){
          if( willReset[i+1] ){
            reset(domA,willReset[i+1]);
          }
      });
      H5ComponentPie.reSort( willReset );
  }

HTML&CSS

  • HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <title>IT教育网2015课程学习情况</title>

    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: #000;
            font-size: 12px;
        }

        .iphone{
            width: 340px;
            height: 540px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -270px 0 0 -170px;
        }
    </style>

    <script type="text/javascript" src="../js/lib/jquery.js"></script>
    <script type="text/javascript" src="../js/H5ComponentBase.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5ComponentBase.css">


    <!-- 引入饼图的资源 -->
    <script type="text/javascript" src="../js/H5ComponentPie.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/H5ComponentPie.css">

    <body>
        <!-- 用于开发测试 H5ComponentPie 对象（饼图组件） -->
        <div class="iphone">

        </div>

        <script type="text/javascript">

            var cfg = {
                type : 'pie',

                width : 400,
                height : 400,

                data:[
                    ['Js' , .7  ,'#ff7676'],
                    ['CSS3' , .05 ],
                    ['HTML5' , .05  ],
                    ['PHP' , .05  ],
                    ['jQuery' , .15 ]
                ],
                css : {
                    top:100,
                    opacity:0
                },
                animateIn:{
                    opacity:1,
                    top:200,
                },
                animateOut:{
                    opacity:0,
                    top:100,
                },
                center : true,
            }

            var h5 = new H5ComponentPie( 'myBarComponent', cfg );
            $('.iphone').append(h5);


            var leave = true;
            $('body').click(function (){
                leave = !leave;
                $('.h5_component').trigger( leave ? 'onLeave' : 'onLoad' )
            }).click();

        </script>

    </body>

</html>
  • CSS
/* 饼图组件样式 */

.h5_component_pie{
}

.h5_component_pie canvas{
    position: absolute;
    left: 0;
    top: 0; /* 用canvas做动画，会进行分层，要用到  z-index */
    width: 100%;
    height: 100%;
}

.h5_component_pie .text{
    position: absolute;
    z-index: 99;
    font-size: 12px;
    text-align: center;
    height: 24px;
    transition:all 10s;
}

饼图效果

    这里写图片描述

H5ComponentPie扩展，环图实现

  • 区别
        这里写图片描述

  • 步骤提示

  环图只支持一个数据、需要预先格式化；环图就是在饼图中间增加一个圆形的白色遮罩，并且把项目文本、百分比，添加到遮罩中，水平垂直居中，完成！

一：在 HTML 中引入必要的资源文件，并且完成配置以及实例化的代码
分析：
  1、需要引入必要的资源，包括 jquery.js、H5componentBase 相关资源（css、js）、H5ComponentPie 相关资源(css、js)，环图自身的资源（css、js）共计 7 个文件。
  2、配置文件缺少类型 (type) 和数据 (data) 的定义，完成这两个配置。
注意：环图只支持一项数据
  3、完成 组件对象 (h5) 的定义（var h5 = …??），注意这里 new 的对象是 环图组件对象

二：在 JS 中 完成环图的逻辑
分析：
  1、把数据格式化为只有一项，例如 a = [ [1] , [2] , [3] ] 格式化为： a=[ [1] ]
  2、重设配置中的 type 参数 (cfg.type=’pie’;)，不仅利用 H5ComponentPie 构建 DOM 结构和 JS 逻辑，也使用其 CSS 样式定义（思考下为什么能达到这个效果？）
  3、修正组件的样式，以支持在样式文件中组件的样式定义 .h5_component_ring 相关样式能生效
  4、把创建好的遮罩元素 (.mask) 添加到组件中
  5、在遮罩元素 ( .mask ) 中添加项目文本信息

三：完善环图的样式
分析：
  1、修正遮罩层的样式，为其添加白色背景颜色，并且设置为完成 圆形饼图的 80% 大小
  2、注意：把遮罩层设置为圆形的方式是通用方法：border- radius:50%
  3、注意：把遮罩层设置为 饼图的 80% 大小，可修改宽度配合 left、top 也可以使用 scale

JS代码
/* 环图组件对象 */

var H5ComponentRing =function ( name, cfg ) {


  if(cfg.data.length>1){  //  环图应该只有一个数据
    // 任务二：(1) 把数据格式化为只有一项，例如 a = [ [1] , [2] , [3] ] 格式化为： a=[ [1] ]
    cfg.data = [cfg.data[0]];
  }

  //  任务二：(2) 重设配置中的 type 参数，不仅利用 H5ComponentPie 构建 DOM 结构和 JS 逻辑，也使用其 CSS 样式定义（思考下为什么能达到这个效果）
  cfg.type = 'pie';
  var component =  new H5ComponentPie( name ,cfg );

  //  任务二：(3) 修正组件的样式，以支持在样式文件中组件的样式定义 .h5_component_ring 相关样式能生效
  component.addClass('h5_component_ring');


  var mask = $('<div class="mask">');

  // 任务二：(4) 把创建好的遮罩元素添加到组件中
  component.append(mask);

  var text = component.find('.text');

  text.attr('style','');
  if(cfg.data[0][2]){
    text.css('color',cfg.data[0][2]);
  }
  //  任务二：(5) 在遮罩元素( .mask ) 中添加文本信息
  mask.append( text );

  return component;
}
CSS改动
/* 环图组件样式 */

.h5_component_ring{
}

.h5_component_ring .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 90;
    /* 任务三：修正遮罩层的样式，为其添加白色背景颜色，并且设置为完成 圆形饼图的 80% 大小 */
    background-color: #fff;
    border-radius: 50%;
    -webkit-transform:scale(.8);
}

.h5_component_ring .text{
    width: 100%;
    top: 40%;
    opacity: 0;
}
.h5_component_ring .text .per{
}
环图实现效果

    这里写图片描述

「已注销」
关注
专栏目录
组件方式开发webApp源码
03-21
通过组件方式开发webApp 整个项目的源码
使用H5的canvas绘制饼状图
weixin_44823731的博客
05-12 908
前言：在我们写网站，我们往往都想要向用户展示一些数据，比如访问数，文章的点击数等等。如果我们只是用数字来向用户展示的，用户很可能会感觉到枯燥，因为数据的显示实在使太单一的。所以今天我来教大家来用H5的画布api来绘制饼状图，让你的网站更加高大上。 直接进入正题，先展示成果和源码。 最终结果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
H5制作饼状图
hzp666的博客
06-30 4447
HTML5与CSS3严格意义上不具备编程语言的思想，所以还要借助JS去“画”它。 html代码 JS代码 var color = ["#999999","#333333","#336799"]; var data = [25,35,50]; function drawCircle(){ var canvas = document.getElementById("bingtu");
纯HTML5 Canvas实现的饼图
jishublog
08-21 1212
基本思路： 主要是利用HTML5 Canvas实现饼图绘制，绘制弧度的API主要是使用 context.arc与lineto两个API。 实现的功能有： 1. 支持标签Legend显示或者隐藏 2. 首次载入动画效果 3. 鼠标tooltip效果 4. 自定义饼图大小与是否添加文字 效果如下： 调用代码： &lt;html&gt; &lt;head&gt; &lt;met...
uni-app 用于开发H5项目展示饼图，使用ucharts 饼图示例
最新发布
LlanyW的专栏
12-18 2092
下载之后将对应的文件拷贝到自己的项目对应目录。
pie-meister.github.io:百分比和切片的SVG饼图Web组件
03-17
pie-meister.github.io 百分比和切片的SVG饼图Web组件
Excel饼图圆环图模板-饼图百分比
11-24
在Excel中，饼图和圆环图是数据可视化的重要工具，尤其在展示各项比例或占比时，它们能直观地呈现数据关系。这两种图表类型在商业报告、数据分析和学术研究中广泛应用。下面，我们将深入探讨饼图和圆环图的相关知识...
andorid-饼图&柱状图.rar
01-17
总的来说，Android平台上的饼图和柱状图实现主要依赖于第三方库，如MPAndroidChart，开发者需要了解其API用法，进行数据设置和样式定制，以创建符合需求的可视化组件。同时，为了提高用户体验，还需考虑图表的交互性...
css-pie:使用Polymer构建的即用型饼图Web组件
05-16
通过这些资源，开发者可以了解css-pie的工作原理，学习如何在自己的项目中导入和使用这个组件，以及如何根据需要自定义饼图的样式和行为。纯CSS的实现使得这个组件在性能和兼容性上具有优势，同时降低了学习和使用的...
uni-app 引入echarts饼图，其他图形一样，按需引入
08-31
【uni-app】是一个基于Vue.js开发的多端框架，它允许开发者编写一次代码，即可运行在小程序、H5、App等多个平台。在这个项目中，我们看到开发者正尝试将【ECharts】图表库引入到uni-app中，特别是【饼图】。ECharts...
组件方式开发 Web App全站j教程视频
04-15
组件方式开发 Web App全站j教程视频，我也在学习中，讲课方式很幽默，内容清晰，强力推荐小伙伴去学习。
html5圆形统计图
08-12
h5圆形进度条，半环形进度，jQuery圆形统计插件
组件方式开发 Web App全站百度网盘
04-13
HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站
html5 canvas画饼状图
07-08
通过自定义类，可以实现页面内任意多个饼图 自定义饼图各块的颜色，任意多 在firefox 22,chrome 浏览器测试通过
组件方式开发 Web App全站-1
含笑
04-05 864
H5专题页类型 活动运营 品牌宣传 产品介绍 总结报告 职业：名称->产出 原型设计：产品经理->需求文档（MRD） 描述项目功能需求 经验：产品经理的需求文档的功能不可能100%全部实现 视觉/交互：视觉工程师/交互工程师（美术/美工）->交互设计稿（功能实现），视觉设计稿（美术） 技术规划：技术（项目）经理->项目开发文档.md 可行性确认 技术选型 开发/线
慕课网实战—《用组件方式开发 Web App全站 》笔记二
后乐的博客
07-14 5833
运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！ 《用组件方式开发 Web App全站 》
组件方式开发 Web App全站-4- 页面切换
含笑
04-06 773
方法： - 添加一个页 addPage - 添加一个组件 addComponet - 展现所有的页面 loader 图文组件类：H5ComponentBase 作用：输出一个DOM，内容可以是图片或者文字 事件： - 当前页载入：onLoad - 当前页移出：onLeave 图表组件类：H5Component？？？ 作用：在H5ComponentBase的基础值上插入D
MPchart 使用详解及详细属性（ 二）----pieChart(饼状图)
热门推荐
李彬博客专栏
06-28 2万+
项目源代码：https://github.com/libin7278/MpChart 第一步导入library 详细见MPchart使用详解及详细属性（一） http://blog.csdn.net/github_33304260/article/details/51272078 第二步pieChart源代码 import android.app.Activity;
H5canvas--饼图
Yi_xuan_sky的博客
08-16 734
效果图： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ca
JFreeChart：Java Web报表开发利器：饼图、柱状图与曲线图实战
JFreeChart是Java开发中常用的报表技术，它提供了一组强大的绘图API，支持创建各种类型的报表，如柱状图、饼图、曲线图和甘特图。这个教程着重于在Web开发环境中如何利用JFreeChart提升报表的用户体验，尤其是在JSP...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值