Использование jQuery для создания гистограмм на основе комментариев пользователей

Question

Я все еще изучаю jQuery и столкнулся с чем-то, чего я просто не могу понять? (Я не очень хорош в математике!). Я знаю, что, вероятно, есть плагин графического типа, который я мог бы использовать, но я не знаю, нужно ли мне что-то такое громоздкое / тяжелое для кода. Любая помощь будет принята с благодарностью. Этот сайт является лучшим источником обучения в сети!

Я пытаюсь выяснить, как я могу просмотреть список комментариев с «оценкой» отлично / хорошо / хорошо / плохо, содержащихся в DIV в комментарии li. Затем определите процент превосходных / хороших / нормальных / плохих комментариев, основываясь на том количестве комментариев, например: если всего 4 комментария и 3 товара и 1 плохой, то это будет 75% хорошо и 25 % бедных.

Затем, чтобы отобразить эти проценты, используя свойство width для каждого из соответствующих DIV в процентном столбце.

Извините, если это не ясно, я думал, что это будет так просто, но я в тупике. Пожалуйста, ознакомьтесь с разметкой ниже, чтобы понять, что я пытаюсь сделать.

Любая помощь будет потрясающей! :)

КОММЕНТАРИЙ // Это будут комментарии с отличным / хорошим / нормальным / плохим рейтингом. Они будут обернуты в UL с идентификатором 'comments'

<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 с идентификатором 'results'.

<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

Вот начало:

Я старался сделать его как можно более простым, чтобы бары не были такими красивыми.

Пример jsFiddle

    // 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 со своими данными. Вы не получите результат в формате HTML с divs, а вместо этого как изображение. Это лучше, потому что он намного более переносим, ​​а также API имеет массу опций конфигурации и различных типов графиков, которые он поддерживает.