- 浏览: 1766629 次
- 性别:
- 来自: 大连
-
博客专栏
-
-
Spring数据库访问系列...
浏览量:174424
-
-
Android学习笔记
浏览量:369804
-
-
iBatis开发详解
浏览量:190038
-
-
Objective-C学习...
浏览量:100984
最新评论
-
iLidy:
引用[/c
Hibernate持久化对象的生命周期详解 -
fengzigogo:
您好,有这个项目架构的源码下载地址吗?
一种Java Web应用开发框架的构建(基于Struts2+Spring+FreeMarker)之一 -
spring_springmvc:
可以参考最新的文档:如何在eclipse jee中检出项目并转 ...
用Maven构建Java Web开发环境(Jetty容器)之二 -
springdata_springmvc:
spring mvc demo教程源代码下载,地址:http: ...
Spring 3之MVC & Security简单整合开发(二) -
赵庆辉:
看帖回复是美德,楼主讲的很清晰明了,看了豁然开朗.
Java String对象的经典问题(new String())
本文接上一讲继续来说明
我们继续来制作饼图示例,结合CSS3。先说一下需求,就是一个展示的页面,用饼图来展示数据,下方给出各个扇形的含义,最后给一个按钮点击进入详情。饼图的上方有标题和简单的文字介绍,这些内容竖式结构,页面上显示散列,就是这么简单。
我们首先来设置背景样式,用CSS3的渐变,那么首先页面代码需要先修改,我们一步一步来,首先看下HTML代码:
这样,我们就得到了一个渐变的背景,并且对webkit内核和moz内核的浏览器都可用,同时设置没有滚动条。好,下面来设置显示的区域,加入渐变,那么我们将HTML代码修改如下:
就是在内部加入了一个div层,那么相应的CSS代码如下:
因为我们要做层次的效果,且层间不能干扰,我们使用了绝对定位,同时设置属性,这里还加入了圆角矩形的设置,圆角半径为12px,最后设置渐变效果opacity为0.5,那么效果大家自己去看,我们继续来做:
很简单,加了一个div,设置class为panel,那么CSS为:
也是用了渐变的背景,然后设置长宽和位置,加上圆角矩形,根据外层背景的长和宽,我们预留的渐变边框为25px,那么内层的各个属性我们也不难算出来,那么我们就得到了现在的效果:
底板基本都做好了,我们就开始往里面填充内容吧,首先是HTML:
要放置这三个块了,就设置三个层,然后进行样式处理:
这里我留下了border属性,就是为了测试时定位用的,那么现在我们得到了这样的效果:
下面就是对这三块中的内容进行填充了,我们讲解一块,其它三个都是类似的,很简单,首先我们设置标题title和副标题subTitle:,放到section1中:
样式代码如下:
现在的效果为:
接下来我们要放置配置饼图的canvas了,绘制饼图的方法之前说过,就是一段JavaScript代码,我们只需要留出位置即可:
下面就是确定样式和绘制饼图了,只需调整圆心位置即可,将data数组放于方法内,我们要设置三组data值,而color就是一组:
我们来看看绘制好饼图后的效果:
下面放置对饼图的介绍,也很简单,我们来看一下,将下面的代码放置到piechart的div下面:
其中涉及到的CSS样式为:
其中没什么可多说的,就是设置了一下奇偶行的不同颜色,因为我们都是定死的,所以就这么来做了,比较简单,剩下就是设置长宽,圆角的样式了,不是很难,现在我们得到了这样的效果:
还有最后的一个按钮了,也很简单了,我们如下设置,接着上面的代码,编写:
然后设置样式:
现在我们就完成了一组了,得到如下的效果:
比葫芦画瓢完成剩下两组,也很简单了,最后我们得到:
那么,这个例子也就做完了,主要是介绍利用Canvas绘制饼图,然后结合CSS制作一个小demo,用于数据展示用,对浏览器要求比较高,而且基本排除了IE,暂时也就不太适合普通应用,在特定浏览器的应用中(比如ipad中的safari等)使用较好。
至此,本部分就介绍完了。欢迎交流,希望对使用者有用。更多精彩内容,稍后为您呈现。
我们继续来制作饼图示例,结合CSS3。先说一下需求,就是一个展示的页面,用饼图来展示数据,下方给出各个扇形的含义,最后给一个按钮点击进入详情。饼图的上方有标题和简单的文字介绍,这些内容竖式结构,页面上显示散列,就是这么简单。
我们首先来设置背景样式,用CSS3的渐变,那么首先页面代码需要先修改,我们一步一步来,首先看下HTML代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 Canvas Demo</title> <style type="text/css"> body{ margin:0px; padding:0px; } .bg{ position:absolute; height:100%; width:100%; overflow-x: hidden; overflow-y:hidden; background-image: -moz-linear-gradient(top,#77D1F6, #2F368F); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #77D1F6),color-stop(1, #2F368F)); } </style> </head> <body> </html>
这样,我们就得到了一个渐变的背景,并且对webkit内核和moz内核的浏览器都可用,同时设置没有滚动条。好,下面来设置显示的区域,加入渐变,那么我们将HTML代码修改如下:
<div class="bg"> <div class="panelBg"></div> </div>
就是在内部加入了一个div层,那么相应的CSS代码如下:
.panelBg{ position:absolute; height:600px; width:800px; left:250px; top:20px; border-radius: 12px; background-color:#000000; opacity:0.5; }
因为我们要做层次的效果,且层间不能干扰,我们使用了绝对定位,同时设置属性,这里还加入了圆角矩形的设置,圆角半径为12px,最后设置渐变效果opacity为0.5,那么效果大家自己去看,我们继续来做:
<div class="bg"> <div class="panelBg"></div> <div class="panel"> </div> </div>
很简单,加了一个div,设置class为panel,那么CSS为:
.panel{ position:absolute; height:550px; width:750px; left:275px; top:45px; border-radius: 12px; background-image: -moz-linear-gradient(top,#EBEBEB, #BFBFBF); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB),color-stop(1, #BFBFBF)); }
也是用了渐变的背景,然后设置长宽和位置,加上圆角矩形,根据外层背景的长和宽,我们预留的渐变边框为25px,那么内层的各个属性我们也不难算出来,那么我们就得到了现在的效果:

底板基本都做好了,我们就开始往里面填充内容吧,首先是HTML:
<div class="bg"> <div class="panelBg"></div> <div class="panel"> <div id="section1"> </div> <div id="section2"> </div> <div id="section3"> </div> </div> </div>
要放置这三个块了,就设置三个层,然后进行样式处理:
#section1{ border:1px solid red; position:relative; float:left; width:235px; height:530px; top:10px; left:10px; } #section2{ border:1px solid red; position:relative; float:left; width:235px; height:530px; top:10px; left:20px; } #section3{ border:1px solid red; position:relative; float:left; width:235px; height:530px; top:10px; left:30px; }
这里我留下了border属性,就是为了测试时定位用的,那么现在我们得到了这样的效果:

下面就是对这三块中的内容进行填充了,我们讲解一块,其它三个都是类似的,很简单,首先我们设置标题title和副标题subTitle:,放到section1中:
<div id="section1"> <div class="title">HTML5</div> <div class="subTitle">HTML5 是下一代的HTML,包含诸多新特性,比如绘制图形的canvas元素。</div> </div>
样式代码如下:
.title{ border:1px solid red; position:relative; margin:5px; font-family:微软雅黑; font-size:22px; font-weight:bold; text-align:center; color:#58595B; } .subTitle{ border:1px solid red; margin:5px; font-family:微软雅黑; font-size:14px; height:70px; font-weight:bold; text-indent:2em; color:#6D6E71; }
现在的效果为:

接下来我们要放置配置饼图的canvas了,绘制饼图的方法之前说过,就是一段JavaScript代码,我们只需要留出位置即可:
<div id="section1"> <div class="title">HTML5</div> <div class="subTitle">HTML5 是下一代的HTML,包含诸多新特性,比如绘制图形的canvas元素。</div> <div class="piechart"> <canvas id="piechart1" width="225" height="168"></canvas> </div> </div>
下面就是确定样式和绘制饼图了,只需调整圆心位置即可,将data数组放于方法内,我们要设置三组data值,而color就是一组:
.piechart{ border:1px solid red; margin:5px; height:170px; }
<script type="text/javascript"> var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"]; function drawCircle(){ var data = [5,30,15,30,20]; var canvas = document.getElementById("piechart1"); var ctx = canvas.getContext("2d"); var startPoint= 1.5 * Math.PI; for(var i=0;i<data.length;i++){ ctx.fillStyle = color[i]; ctx.strokeStyle = color[i]; ctx.beginPath(); ctx.moveTo(112,84); ctx.arc(112,84,84,startPoint,startPoint-Math.PI*2*(data[i]/100),true); ctx.fill(); ctx.stroke(); startPoint -= Math.PI*2*(data[i]/100); } } drawCircle(); </script>
我们来看看绘制好饼图后的效果:

下面放置对饼图的介绍,也很简单,我们来看一下,将下面的代码放置到piechart的div下面:
<div class="description"> <div class="scroll-item item-even"> <div class="rect" style="background-color: rgb(119, 209, 246); "></div> <div class="item-text">20% Opera</div> </div> <div class="scroll-item item-odd"> <div class="rect" style="background-color: rgb(44, 168, 224); "></div> <div class="item-text">30% FireFox</div> </div> <div class="scroll-item item-even"> <div class="rect" style="background-color: rgb(54, 102, 176); "></div> <div class="item-text">15% Safari</div> </div> <div class="scroll-item item-odd"> <div class="rect" style="background-color: rgb(47, 54, 143); "></div> <div class="item-text">30% Chrome</div> </div> <div class="scroll-item item-even"> <div class="rect" style="background-color: rgb(39, 37, 95); "></div> <div class="item-text">5% IE</div> </div> </div>
其中涉及到的CSS样式为:
.description{ border:1px solid #CCCCCC; border-color: #636263 #464647 #A1A3A5; margin:10px 5px; height:165px; border-radius: 4px; } .scroll-item { position: relative; width: 100%; height: 32px; border-bottom:1px solid gray; cursor: pointer; } .item-even { background-color: #E7E8EC; } .item-odd { background-color: #E0ECF6; } .rect { float: left; margin-top: 5px; margin-left: 5px; width: 20px; height: 20px; border-radius: 3px; } .item-text{ margin-left: 5px; height: 100%; float: left; font-size: 14px; font-family: 微软雅黑; vertical-align: middle; display: inline-block; line-height: 30px; }
其中没什么可多说的,就是设置了一下奇偶行的不同颜色,因为我们都是定死的,所以就这么来做了,比较简单,剩下就是设置长宽,圆角的样式了,不是很难,现在我们得到了这样的效果:

还有最后的一个按钮了,也很简单了,我们如下设置,接着上面的代码,编写:
<div class="button]<span class="buttonText">查看详情 ></span>[/align]
然后设置样式:
.button{ border:1px solid #cccccc; cursor:pointer; margin:10px 5px; height:40px; text-align:center; border-radius: 4px; border-color: #636263 #464647 #A1A3A5; text-shadow: 0 1px 1px #F6F6F6; background-image: -moz-linear-gradient(center top, #D9D9D9, #A6A6A6 49%, #A6A6A6 50%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D9D9D9),color-stop(1, #A6A6A6)); } .buttonText{ position:relative; font-weight:bold; top:10px; font-family:微软雅黑; color:#58595B; }
现在我们就完成了一组了,得到如下的效果:

比葫芦画瓢完成剩下两组,也很简单了,最后我们得到:

那么,这个例子也就做完了,主要是介绍利用Canvas绘制饼图,然后结合CSS制作一个小demo,用于数据展示用,对浏览器要求比较高,而且基本排除了IE,暂时也就不太适合普通应用,在特定浏览器的应用中(比如ipad中的safari等)使用较好。
至此,本部分就介绍完了。欢迎交流,希望对使用者有用。更多精彩内容,稍后为您呈现。
发表评论
-
HTML5/CSS3翻转动画(二)
2011-12-31 11:28 9667上一篇我们制作了两行文字的翻转效果,他们是同步进行的, ... -
HTML5/CSS3翻转动画(一)
2011-12-30 13:43 17764翻转动画效果,就是将页面的元素(文字,图片)加入围绕坐 ... -
HTML5/CSS3清爽后台番外篇-添加锁屏效果
2011-10-29 12:34 10313锁屏效果,也就是将屏幕置于模态,不允许用户触发任何动作 ... -
基于HTML5/CSS3的清爽后台管理页面(二)
2011-10-02 09:11 13143本文接上一篇继续来介绍企业级开发中后台管理页面的制作。 ... -
基于HTML5/CSS3的清爽后台管理页面(一)
2011-10-01 21:36 20728后台管理系统是企业级开发中必不可少的组成部分,一般来说 ... -
HTML5绘制饼图实例(二)
2011-08-15 20:48 8本文接上一讲继续来说明 我们继续来制作饼图示例 ... -
HTML5绘制饼图实例(一)
2011-08-14 15:28 12443HTML5引入Canvas元素 ... -
我的视频教程《中小企业OA系统》
2011-07-29 22:27 7780经过5个月的制作,和华章合作的《中小企业OA系统》Ja ... -
从一道Neusoft题中想到的Java日志API
2011-03-05 09:45 6985先来看看这一季度 ... -
Apache POI组件操作Excel,制作报表(四)
2011-01-04 22:36 10291上一篇我们介绍了如何制作复杂报表的分析和设计,本篇结合 ... -
Apache POI组件操作Excel,制作报表(三)
2010-12-27 23:26 13329上一篇介绍了POI组件操作Excel时如何对单元格和行 ... -
Apache POI组件操作Excel,制作报表(二)
2010-12-19 16:04 18314本文接上一篇继续探究POI组件的使用。 现在来看 ... -
Apache POI组件操作Excel,制作报表(一)
2010-12-16 22:25 42476Apache的POI组件是Jav ... -
使用JACKSON解析JSON(HttpClient 3处理请求)
2010-11-24 18:50 27570在上一篇中,我们 ... -
使用XStream解析XML(使用HttpClient 4发送请求)
2010-11-07 12:55 9698本文意在简单说明XStream解析XML,配合Http ... -
从一道Neusoft题中想到的IO和Comparator
2010-09-23 10:36 2880Neusoft内部定期举 ... -
Spring支持的Quartz程序调度
2010-09-05 21:45 9735开发时有时会有这样一种需求,定期计算某些数据或者执行某 ... -
Servlet 3(用Java生成GET/POST请求)
2010-08-29 10:59 14668Servlet是SUN指定的Java服务器端编程规范, ... -
使用Fusion Charts制作报表(dom4j生成XML)
2010-07-13 13:03 16930首次看到Fusion Charts是在Bug Free ... -
使用Javabean作为数据源的JasperReport报表(通过WebService/RMI调用数据)
2010-06-18 09:46 7263本文接http://sarin.iteye.com/b ...
相关推荐
内容概要:本文详细介绍了基于MATLAB GUI界面和卷积神经网络(CNN)的模糊车牌识别系统。该系统旨在解决现实中车牌因模糊不清导致识别困难的问题。文中阐述了整个流程的关键步骤,包括图像的模糊还原、灰度化、阈值化、边缘检测、孔洞填充、形态学操作、滤波操作、车牌定位、字符分割以及最终的字符识别。通过使用维纳滤波或最小二乘法约束滤波进行模糊还原,再利用CNN的强大特征提取能力完成字符分类。此外,还特别强调了MATLAB GUI界面的设计,使得用户能直观便捷地操作整个系统。 适合人群:对图像处理和深度学习感兴趣的科研人员、高校学生及从事相关领域的工程师。 使用场景及目标:适用于交通管理、智能停车场等领域,用于提升车牌识别的准确性和效率,特别是在面对模糊车牌时的表现。 其他说明:文中提供了部分关键代码片段作为参考,并对实验结果进行了详细的分析,展示了系统在不同环境下的表现情况及其潜在的应用前景。
嵌入式八股文面试题库资料知识宝典-计算机专业试题.zip
嵌入式八股文面试题库资料知识宝典-C and C++ normal interview_3.zip
内容概要:本文深入探讨了一款额定功率为4kW的开关磁阻电机,详细介绍了其性能参数如额定功率、转速、效率、输出转矩和脉动率等。同时,文章还展示了利用RMxprt、Maxwell 2D和3D模型对该电机进行仿真的方法和技术,通过外电路分析进一步研究其电气性能和动态响应特性。最后,文章提供了基于RMxprt模型的MATLAB仿真代码示例,帮助读者理解电机的工作原理及其性能特点。 适合人群:从事电机设计、工业自动化领域的工程师和技术人员,尤其是对开关磁阻电机感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解开关磁阻电机特性和建模技术的研究人员,在新产品开发或现有产品改进时作为参考资料。 其他说明:文中提供的代码示例仅用于演示目的,实际操作时需根据所用软件的具体情况进行适当修改。
少儿编程scratch项目源代码文件案例素材-剑客冲刺.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip
内容概要:本文详细介绍了基于PID控制器的四象限直流电机速度驱动控制系统仿真模型及其永磁直流电机(PMDC)转速控制模型。首先阐述了PID控制器的工作原理,即通过对系统误差的比例、积分和微分运算来调整电机的驱动信号,从而实现转速的精确控制。接着讨论了如何利用PID控制器使有刷PMDC电机在四个象限中精确跟踪参考速度,并展示了仿真模型在应对快速负载扰动时的有效性和稳定性。最后,提供了Simulink仿真模型和详细的Word模型说明文档,帮助读者理解和调整PID控制器参数,以达到最佳控制效果。 适合人群:从事电力电子与电机控制领域的研究人员和技术人员,尤其是对四象限直流电机速度驱动控制系统感兴趣的读者。 使用场景及目标:适用于需要深入了解和掌握四象限直流电机速度驱动控制系统设计与实现的研究人员和技术人员。目标是在实际项目中能够运用PID控制器实现电机转速的精确控制,并提高系统的稳定性和抗干扰能力。 其他说明:文中引用了多篇相关领域的权威文献,确保了理论依据的可靠性和实用性。此外,提供的Simulink模型和Word文档有助于读者更好地理解和实践所介绍的内容。
嵌入式八股文面试题库资料知识宝典-2013年海康威视校园招聘嵌入式开发笔试题.zip
少儿编程scratch项目源代码文件案例素材-驾驶通关.zip
小区开放对周边道路通行能力影响的研究.pdf
内容概要:本文探讨了冷链物流车辆路径优化问题,特别是如何通过NSGA-2遗传算法和软硬时间窗策略来实现高效、环保和高客户满意度的路径规划。文中介绍了冷链物流的特点及其重要性,提出了软时间窗概念,允许一定的配送时间弹性,同时考虑碳排放成本,以达到绿色物流的目的。此外,还讨论了如何将客户满意度作为路径优化的重要评价标准之一。最后,通过一段简化的Python代码展示了遗传算法的应用。 适合人群:从事物流管理、冷链物流运营的专业人士,以及对遗传算法和路径优化感兴趣的科研人员和技术开发者。 使用场景及目标:适用于冷链物流企业,旨在优化配送路线,降低运营成本,减少碳排放,提升客户满意度。目标是帮助企业实现绿色、高效的物流配送系统。 其他说明:文中提供的代码仅为示意,实际应用需根据具体情况调整参数设置和模型构建。
少儿编程scratch项目源代码文件案例素材-恐怖矿井.zip
内容概要:本文详细介绍了基于STM32F030的无刷电机控制方案,重点在于高压FOC(磁场定向控制)技术和滑膜无感FOC的应用。该方案实现了过载、过欠压、堵转等多种保护机制,并提供了完整的源码、原理图和PCB设计。文中展示了关键代码片段,如滑膜观测器和电流环处理,以及保护机制的具体实现方法。此外,还提到了方案的移植要点和实际测试效果,确保系统的稳定性和高效性。 适合人群:嵌入式系统开发者、电机控制系统工程师、硬件工程师。 使用场景及目标:适用于需要高性能无刷电机控制的应用场景,如工业自动化设备、无人机、电动工具等。目标是提供一种成熟的、经过验证的无刷电机控制方案,帮助开发者快速实现并优化电机控制性能。 其他说明:提供的资料包括详细的原理图、PCB设计文件、源码及测试视频,方便开发者进行学习和应用。
基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf
嵌入式八股文面试题库资料知识宝典-CC++笔试题-深圳有为(2019.2.28)1.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 V1.5.zip
Android系统开发_Linux内核配置_USB-HID设备模拟_通过root权限将Android设备转换为全功能USB键盘的项目实现_该项目需要内核支持configFS文件系统
C# WPF - LiveCharts Project
少儿编程scratch项目源代码文件案例素材-恐怖叉子 动画.zip
嵌入式八股文面试题库资料知识宝典-嵌⼊式⼯程师⾯试⾼频问题.zip