Таблица к горизонтальной гистограмме в JQuery - PullRequest
Новая
       10

Таблица к горизонтальной гистограмме в JQuery

2 голосов
/ 18 марта 2009

У меня есть таблица: 

1-joe-234
2-bob-432
3-sean-654

Я бы хотел взять его и сделать из него гистограмму.

Не то, чтобы в сети не было lib, но есть прототип или флэш-файл xml.

-

Решением, над которым я работаю, является плагин jquery, который сгенерирует html-ссылку для диаграммы Google ... не красиво, а поцелуй (очень просто) и безобразно.

-

Вот одно из моих вдохновений: http://www.dumpsterdoggy.com/articles/?jquery-horizontal-bar-graph

Ответы [ 3 ]

1 голос
/ 18 марта 2009

Это полностью JavaScript, поэтому, если у вас есть данные в другом формате, вам сначала нужно конвертировать в JS: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<div id="bars"></div>
<script type="text/javascript">
//<![CDATA[
    $(function (){
      var values = [234, 654, 432];
      var maxValue = values[0];
      for(var i = 0; i < values.length; i++){
        maxValue = Math.max(maxValue, values[i]);
      }

      for(var i = 0; i < values.length; i++){
        var newBar = $("<span>").html(values[i]);
        newBar.css({
          "display": "block",
          "width": "0px",
          "backgroundColor": "#600",
          "marginBottom": "5px",
          "padding": "2px",
          "color": "#FFF"
        });

        $("#bars").append(newBar);

        newBar.animate({"width": (100 * values[i] / maxValue) + "%"}, "slow");
      }
    });
//]]>
</script>

Только что написано и протестировано в Opera 10.

Конечно, было бы лучше, если бы вы настроили все возможные правила CSS в отдельном файле, такие как красивый фон, поля между полосами, цвет текста и т. Д., Но это всего лишь демонстрация.

0 голосов
/ 20 марта 2009

Следующее должно сделать трюк. Пример работает против этой самой страницы. Я проверил это, создав букмарклет к нему. В IE это выглядит по центру, что может быть частью стиля страницы. В любом случае, ключ - это селектор в начале. Какие бы элементы не были выбраны этим селектором, они будут использоваться в качестве данных для таблицы. 

var values = [];
$('.item-multiplier').each(function() {
  var t = $(this).text().match(/\d+/);
  if (t) values.push(parseInt(t));
});

var maxValue = values[0];
for(var i = 0; i < values.length; i++)
    maxValue = Math.max(maxValue, values[i]);


for(var i = 0; i < values.length; i++){
    var newBar = $("<span>")
         .html(values[i])
         .css({
      "display": "block",
      "width": "0px",
      "backgroundColor": "#600",
      "marginBottom": "5px",
      "padding": "2px",
      "color": "#FFF"
     });

$("body").append(newBar);
var w = Math.floor((100 * values[i] / maxValue)) + "%";
newBar.animate({"width":w}, "slow");
}
0 голосов
/ 18 марта 2009

Нет, это не то, что я спрашиваю .... он должен получить данные из HTML-таблицы

вот мой код .. не завершено .. 

jQuery.fn.horizontalTableGraph = function() {

    $(this).find("thead").remove();

    var maxvalue = 0;

    $(this).find("tr").each(function(i) {
        $(this).removeClass();      
        $(this).find("td").eq(0).animate({width : '50px'}, 1000);
        $(this).find("td").eq(1).animate({width : '150px'}, 1000).css("text-align","left");
        $(this).find("td").eq(1).css("width","500px");

        var getvalue = $(this).find("td").eq(2).html();
        maxvalue = Math.max(maxvalue,getvalue);
    });

    $(this).find("tr").each(function(i) {

    var thevalue = $(this).find("td").eq(2).html();

    var newBar = $("<span>").html(thevalue);
    newBar.css({
          "display": "block",
          "width": "0px",
          "backgroundColor": "#600",
          "marginBottom": "5px",
          "padding": "2px",
          "color": "#FFF"
        });

        //$(this).find("td").eq(2).hide();
        $(this).find("td").eq(2).append(newBar);

        newBar.animate({"width": (100 * thevalue / maxvalue) + "%"}, "slow");
    })
};

и вот окончательный результат http://acecrodeo.com/06-classement2.php?lang=fra&annee=2008b

Мне нужно добавить значение удаления старого и масштаб оставшегося пространства ...

...