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

Question

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

Answer 1

Lyn 2016-12-07 09:48:37

垂直柱图有源码的

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

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

预览图：

关键代码：

//  柱状图-垂直
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;
}