как сделать систему оценки с помощью штрих-логарифм

Question

Я хочу сделать рейтинговую систему бар для моего сайта, и это то, что я есть на самом деле:

Который не выглядит хорошо на всех: р , Я хочу, чтобы высота увеличивалась как экспоненциальная кривая постепенно. Не слишком крутой в начале, который постепенно увеличивается.

Использование:

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

, где я это цикл с переменной от 0 -> 19 (число делений) и settings.height является базовая высота которого составляет 15. Что я должен сделать, чтобы исправь это?

редактировать: Как это, но с ногами на голове

Answer 1

Следующей основана на первоначальном комментарии Дэвида 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)); 
}