从页面上的Divs值构建基于Jquery或CSS的图表

Question

是否可以根据页面上一组Div中的值构建Jquery或CSS图表？

即。在我的页面上，我有以下

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

然后我想建立一个条形图，其值为21，值为2。

这可能吗？

Answer 1

不仅有可能，还有一个名为jqPlot的插件就是这样做的。

http://www.jqplot.com/

Answer 2

你可以使用jquery来做到这一点：

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

Answer 3

你最好给它们提供相同的类，所以你可以在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中并根据需要给它一个宽度。