如何使用对数制作条形评级系统

Question

我想为我的网站制作一个评分系统，这就是我的实际情况：

这看起来并不好看：p。我希望高度逐渐增加，如指数曲线。一开始不太陡，后来逐渐增加。

使用：

height = (Math.ceil( Math.log(i) * 10) / 10 ) + settings.height

其中 i 是来自0的for循环变量 - ＆gt; 19（条数）和settings.height是基本高度15。 我该怎么做才能纠正它？

编辑：像这样但颠倒了

Answer 1

以下是基于David Fregoli的初步评论，我将其扩展为获得想要的形状和正确的方向。看到这个fiddle（不是为了窃取他的答案，所以随时接受他的话）

CSS

#container {
    position: relative;
    height: 150px;
}

bar {
    position: relative;
    width: 20px;
    border: 1px solid #aaf;
    background-color: #ddf;
    margin-right: 1px;
    float: left;
    cursor: pointer;
}

<强> JS

var baseheight = 5;
for ( var i = 0; i < 10; i++ ) {
    var h = 5*Math.pow(2,i/2) + baseheight;
    var offset = Math.ceil(150-h);
    $('#container').append($('<bar>').css('height', h).css('top', offset));
}