Построить диаграмму на основе Jquery или CSS из значений Div на странице

Question

Можно ли построить диаграмму Jquery или CSS на основе значений в наборе элементов Div на странице?

т.е. на моей странице у меня есть следующее

Value One = <div id="q1">21</div>
Value Two = <div id="q2">40</div>

ТогдаИсходя из этого, я хочу построить гистограмму со значением один 21 и значением два 40.

Возможно ли это?

Answer 1

Мало того, что это возможно, есть отличный плагин под названием jqPlot, который делает именно это.

http://www.jqplot.com/

Answer 2

Вам лучше дать им тот же класс, так что вы можете просмотреть их как массив в jQuery:

<div class="bar" id="q1">21</div>
<div class="bar" id="q2">40</div>

Тогда:

var bars = $('.bar') - это даст вамВаша коллекция

Вам необходимо определить, какая из них самая большая:

var maxBar = 0
for(var x=0;x<bars.length;x++) {
    if(parseInt($(bars[x]).text())>maxBar) {
       maxBar = parseInt($(bars[x]).text())
    }
}

Отсюда отрегулируйте размер столбцов пропорционально наибольшему:

for(var x=0;x<bars.length;x++) {
    mySize = parseInt($(bars[x]).text())
    $(bars[x]).css('width', parseInt(mySize/maxBar)*100)+'%')
}

Оберните свои бары в DIV и задайте ширину по желанию.

Answer 3

Вы можете использовать jquery для этого:

http://www.1stwebdesigner.com/css/top-jquery-chart-libraries-interactive-charts/