Question

我还在学习jQuery并遇到过一些我无法理解的问题？（我不擅长数学！）。我知道可能有一个图形类型的插件，我可以使用，但我不知道我是否需要一些如此庞大/代码繁重的东西。任何帮助将不胜感激。该网站是网上最好的学习资源！

我正在试图弄清楚我如何查看评论列表，这些评论在评论中包含在DIV中的优秀/好/好/差的'评级'。然后根据有很多评论来计算优秀/好/好/差评论的百分比例如：如果总共有4条评论，并且有3种商品和1种差评，那么它将是75％好和25 ％差。

然后使用每个相应的'百分比栏'DIV的宽度属性显示这些百分比。

对不起，如果不清楚的话，我认为这会很简单，但我很难过。请参阅下面的标记，以了解我想要做的事情。

任何帮助都会很棒！：）

评论//这些评论中包含优秀/好/好/差评。这些将包含在带有“评论”

的UL中

<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="okay">It's okay</div>
</li>
<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="excellent">It's okay</div>
</li>
<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="okay">It's okay</div>
</li>
<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="poor">It's okay</div>
</li>
<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="poor">It's okay</div>
</li>
<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="good">It's okay</div>
</li>
<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="good">It's okay</div>
</li>
<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="good">It's okay</div>
</li>
<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="good">It's okay</div>
</li>
<li>
   <p>blah blah blah...</p>
   <div class="user-image"></div>
   <div class="okay">It's okay</div>
</li>

评论//这些将是结果，每个百分比栏由DIV包含，对应于评级优秀/好/好/差。这些将包含在带有“结果”的UL中。

<li>
    <div class="excellent">
        <div class="percentage-bar"></div>
    </div>
</li>
<li>
   <div class="good">
        <div class="percentage-bar"></div>
    </div>
</li>
<li>
    <div class="okay">
        <div class="percentage-bar"></div>
    </div>
</li>
<li>
    <div class="poor">
        <div class="percentage-bar"></div>
    </div>
</li>

Answer 1

这是一个开始： alt text

我试图让它尽可能简单，所以条形图并不那么漂亮。

的 jsFiddle example

// Add a sum function to the Array Array.prototype.sum = function(){ var sum = 0; for(var i = 0; i < this.length; sum += this[i++]); return sum; } $(function() { // set the "size" of the chart var size = 400; // store the rating names var ratings = ["excellent", "good", "okay", "poor"]; // zeroed out array for number of votes for each var votes = [0, 0, 0, 0]; // through the `LI`s and I add each vote to the appropriate // index of the votes array $("ul li").each(function(){ ++votes[ $.inArray($("div:last", this).attr("class"), ratings) ]; }); // Get the total votes cast var total = votes.sum(); $("#chart").attr("height", size); // Go though each of the votes array elements // and create a bar for each type of vote cast $(votes).each(function(index, value) { // Calculate length of this one bar. // could use something like $("#chart").height() instead of size var howTall = (value / total) * size; var bar = $("<div>"); bar.attr("class", "bar"); bar.height(howTall); bar.width(20); bar.attr("bottom", size); var result = $("<div>"); // Add label of type vote displayed result.append(ratings[index]); result.attr("class", "result"); // Add the bar result.append(bar); // Add the percent shown result.append((100*value/total) + "%"); $("#chart").append(result); }) });

当然，这可以大大改善。杆的底部可以全部处于同一水平，顶部变化。可以在添加每个条形图时添加动画。渐变可能会被抛入......等等，

但代码的核心是计算所有投票，将它们存储在一个数组中，然后使用该数组计算DIV的百分比和高度。

Answer 2

我强烈建议使用jQuery插件HighCharts。它非常易于使用，并且在旧版浏览器中运行得非常好（IE 6）。

http://highcharts.com/

Answer 3

jQuery不太适合图像处理。此外，当您尝试根据数据缩放图表以便正确显示时，会涉及到相当多的数学运算。不要自己制作图表，请尝试使用Google Chart API：http://code.google.com/apis/chart/。

您不必担心处理数字或创建图形;只需为您的数据提供API。您不会使用divs获得HTML格式的结果，而是将其作为图像。这样做更好，因为它更便携，而且API还有大量配置选项和它支持的不同类型的图形。

使用jQuery根据用户注释创建条形图

3 个答案:

的 jsFiddle example