Jquery flot bar反转y轴

时间:2012-11-06 06:40:52

标签: javascript jquery flot

我不能用反向y轴创建flot bar。

从这一点来看:

transform: function (v) {return -v; },
inverseTransform: function (v) { return -v; }

В图形只是翻转, 例如:http://jsbin.com/eloven/2/edit

请帮忙!

2 个答案:

答案 0 :(得分:3)

如果这是你的反向y轴(11,10,9 ... 1),

xaxis: {
    transform: function(v) {
        return -v;
    },
    inverseTransform: function(v) {
        return -v;
    }
},
yaxis: {
    show: true,
    tickSize: 200

}

答案 1 :(得分:0)

解决方案: 0 - (currentValue - maxValue)

#graph-bars .bar-wrap {
    height: 45px;
    display: block;
    margin: 0 0 10px;
    border-bottom: 1px solid #9D9D9C;
    position: relative;
}

#graph-bars .bar {
    background: #808080;
    color: #808080;
    width: 50px;
    min-height: 5px;
    max-height: 100%;
    position: absolute;
    bottom: 0;
    left: 20%;
}

Array.max = function( array ) {
    return Math.max.apply( Math, array );
};

for(...) {// i -counter
    var max = Array.max(years[lastYear]);
    var height = 0 - (years[lastYear][i] - max); // 0 - (currentValue - maxValue)

    $('#graph-bars').append("<span class='bar-wrap'><span class='bar' style='height:"+ height +"%'></span>");
}