运用HTML5、CSS3、JS流行技术，采用组件式开发模式，开发Web App全站！技术大牛带你统统拿下不同类型的HTML5动态数据报告！
柱图开发思路
水平柱图开发（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;
}- 实现效果：
时间： 2024-10-07 17:51:31