柱状图从下往上生长,没写出来，用旋转可以吗？

来源：5-5 H5ComponentBar扩展，垂直柱图实现

沐4

2016-11-04

老师，垂直方向的柱状图生长，从下往上生长，我一直没写出来，可以用旋转过来，然后改变一下位置吗？另外这个垂直柱状图有源码吗？

写回答

1回答

Lyn

2016-12-07

垂直柱图有源码的

效果地址：http://webooxx.com/ddemo/H5Webapp/h5_it/index.html

JS地址：http://webooxx.com/ddemo/H5Webapp/h5_it/js/H5ComponentBar_v.js

预览图：

//szimg.mukewang.com/58476a3c0001afe822661356.jpg

关键代码：

//  柱状图-垂直
var H5ComponentBar_v = function(name , cfg){
    var obj  = new H5ComponentBar(name,cfg);
    obj.addClass('h5_component_bar_v');
    var w = (100 / cfg.data.length )>>0;
    obj.find('.line').width(w+'%');
    //  把 width 分配到 height
    $.each(obj.find('.rate'),function(){
        var w = $(this).css('width');
        $(this).width('').height(w);    
    })
    $.each(obj.find('.per'),function(){
        $(this).appendTo( $(this).prev() );
    })
    return obj;
}

Web App用组件方式开发全站

用HTML5/CSS3/JS流行技术，实现移动端可视化数据报告

3164 学习 · 516 问题

查看课程

相似问题

提个关于原生JS滚动执行动画的问题

回答 4

fullpage依赖于jquery在移动端上不会卡吗

回答 2

既然可以用CSS实现就进来用CSS实现，为什么折线图的生长动画不用CSS实现？

回答 2

柱状图垂直效果展示

回答 1

如果要想从下往上伸展，要怎么写动画函数？

回答 2

打开慕课网App查看更多内容