运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！
《用组件方式开发 Web App全站 》
柱图开发思路
水平柱图开发（HTML的DOM搭建）
水平柱图开发（CSS样式编写）
/* 柱状组件样式 */
.h5_component_bar{ }
.h5_component_bar .line{ height: 15px; font-size: 12px; line-height: 15px; margin-bottom: 15px; }
.h5_component_bar .name{ width: 60px; float: left; color: #000; text-align: center; }
.h5_component_bar .rate{ height: 15px; margin-left: 5px; float: left; position: relative; }
.h5_component_bar .rate .bg{ background-color: #99c0ff; width: 0%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 3px; }
.h5_component_bar .per{ width: 20px; color: #99c0ff; margin-left: 5px; float: left; -webkit-opacity:0; }
.h5_component_bar_load .rate .bg{ -webkit-transition:all 1s .5s; width: 100%; }
.h5_component_bar_leave .rate .bg{ width: 0%; }
.h5_component_bar_load .per{ -webkit-transition:all 1s 1.5s; -webkit-opacity:1; }
.h5_component_bar_leave .per{ -webkit-opacity:0; }水平柱图开发（生长动画制作）
- JavaScript
/* 柱图组件对象 */
var H5ComponentBar =function ( name, cfg ) {
var component = new H5ComponentBase( name ,cfg );
$.each(cfg.data,function(idx,item){
var line = $('<div class="line">');
var name = $('<div class="name">');
var rate = $('<div class="rate">');
var per = $('<div class="per">');
var width = item[1]*100 + '%';
var bgStyle = '';
if( item[2] ){
bgStyle = 'style="background-color:'+item[2]+'"';
}
rate.html( '<div class="bg" '+bgStyle+'></div>' );
rate.css('width',width);
name.text( item[0]);
per.text(width);
line.append( name ).append( rate ).append( per );
component.append(line);
});
return component;
}- HTML
<body>
<!-- 用于开发测试 H5ComponentBar 对象（柱图组件） -->
<div class="iphone">
</div>
<script type="text/javascript"> var cfg = { type : 'bar', width : 530, height : 600, data : [ ['JavaScript',.4,'#ff7676'], ['HTML/CSS',.2], ['CSS3',.3], ['HTML5',.1], ['jQuery',.2], ['Bootstrap',.05], ['AngularJs',.09] ], css : { top:100, opacity:0 }, animateIn:{ opacity:1, top:200, }, animateOut:{ opacity:0, top:100, }, center:true, } var h5 = new H5ComponentBar('myBar',cfg); $('.iphone').append(h5); var leave = true; $('body').click(function(){ leave = !leave; $('.h5_component').trigger( leave ? 'onLeave' : 'onLoad'); }); </script>
</body>- 实现效果：
拓展：垂直柱图实现
- 思路分析：
- HTML
<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">
<!-- 任务一：(1)引入需要继承的水平柱图对象js文件 -->
<script type="text/javascript" src="../js/H5ComponentBar.js"></script>
<!-- 引入柱图-垂直的资源 -->
<script type="text/javascript" src="../js/H5ComponentBar_v.js"></script>
<link rel="stylesheet" type="text/css" href="../css/H5ComponentBar_v.css">
<body>
<!-- 用于开发测试 H5ComponentBar_v 对象（垂直柱图组件） -->
<div class="iphone">
</div>
<script type="text/javascript"> var cfg = { // 任务一： （2）修正配置文件的组件类型(type)定义为 ? （注意：这个类型名称的定义关系到样式设置） type : 'bar_v', width : 530, height : 400, data:[ ['Js' , .4 ,'#ff7676'], ['CSS3' , .1 ], ['HTML5' , .2 ], ['PHP' , .05 ], ['jQuery' , .35 ] ], css : { top:100, opacity:0 }, animateIn:{ opacity:1, top:200, }, animateOut:{ opacity:0, top:100, }, center : true, } var h5 = new H5ComponentBar_v( 'myBarComponent', cfg ); $('.iphone').append(h5); var leave = true; $('body').click(function (){ leave = !leave; $('.h5_component').trigger( leave ? 'onLeave' : 'onLoad' ) }).click(); </script>
</body>- CSS
/* 垂直柱状组件样式 */
.h5_component_bar_v{ }
.h5_component_bar_v .line{ float: left; height: 100%; font-size: 12px; position: relative; }
.h5_component_bar_v .name{ width: 100%; position: absolute; left: 0; height: 20px; line-height: 20px; bottom: -20px; text-align: center; }
.h5_component_bar_v .rate{ height: 100%; width: 15px; position: absolute; bottom: 0; left: 50%; margin-left: -8px; }
.h5_component_bar_v .rate .bg{ background-color: #99c0ff; width: 100%; height: 0%; position: absolute; left: 0; bottom: 0; border-radius: 3px; }
.h5_component_bar_v .per{ width: 100%; position: absolute; left: 0; /*任务三：(1)修正 百分比数字 的位置，使其保持在 .bg 的顶端*/ top: -20px; height: 20px; line-height: 20px; text-align: center; color: #99c0ff; -webkit-opacity:0; }
.h5_component_bar_v_load .rate .bg{ -webkit-transition:all 1s .5s; height: 100%; }
.h5_component_bar_v_leave .rate .bg{ height: 0%; }
.h5_component_bar_v_load .per{ -webkit-transition:all 1s 1.5s; -webkit-opacity:1; }
.h5_component_bar_v_leave .per{ -webkit-opacity:0; }
- JavaScript
/* 垂直柱图组件对象 */
var H5ComponentBar_v =function ( name, cfg ) {
// 任务二：(1) 完成 component 的初始化定义（补全 var component = ???）
var component = new H5ComponentBar( name ,cfg );
// 任务二：(2) 完成 width 每个柱图中项目的宽度计算。（补全 var width = ???）
var width = ( 100 / cfg.data.length ) >> 0 ;
component.find('.line').width( width + '%');
$.each( component.find('.rate') ,function(){
var w = $(this).css('width');
// 任务二：(3) 把进度区的宽度重设为高度，并且取消原来的宽度
$(this).height(w).width('');
});
$.each( component.find('.per'),function(){
// 任务二：(4) 重新调整 DOM 结构，把百分比数值(.per)添加到 进度区 (.rate)中，和色块元素(.bg)同级。提示，获得 进度区 元素：$(this).prev()
$(this).appendTo( $(this).prev() ) ;
})
return component;
}- 实现效果：
