Превращение чисел в цветные полосы автоматически в HTML / Javascript

Question

Я хочу автоматически сгенерировать таблицу HTML из некоторых пользовательских данных. Одним из столбцов в моих данных является число в диапазоне от 0 до 100, и я хотел бы показать его более графически, наиболее желательно цветной горизонтальной полосой. Длина полосы будет представлять значение, и цвет также изменится (то есть ниже 20, это красный и т. Д.)

Примерно так (создано с помощью paint.net):

_{(источник: thegreenplace.net )}

Одним из способов достижения этого является создание соответствующего .PNG и размещение его там в качестве изображения. Но я думаю, что это, вероятно, можно сделать с некоторой смесью HTML / CSS / Javascript в автоматическом режиме (т.е. значения, выброшенные в таблицу, являются числовыми, и JS преобразует их в столбцы перед отображением).

Возможно, кто-то уже сделал что-то подобное и может поделиться?

Заранее спасибо

P.S .: Если бы это могло работать в IE6, это было бы лучше (не спрашивайте ...)

P.P.S: он должен работать в автономном режиме, поэтому существующие веб-сервисы (например, диаграммы Google) не помогут

Answer 1

AListApart имеет отличную статью о том, как генерировать диаграммы с использованием исключительно CSS. Это хорошо, потому что он доступен, то есть даже без CSS он предоставит значимые данные.

http://www.alistapart.com/articles/accessibledatavisualization

Обновление: Согласно одному из комментариев к этому ответу, это решение также будет работать в IE6.

Answer 2

Это выполнимо.

2 варианта:

1) поместите изображение в каждую ячейку с помощью тега img и измените размер изображения с помощью атрибута width

2) поместите div с заданной высотой и измените ширину в соответствии со значением, которое вы хотите отобразить. Используйте цвет фона div в качестве цвета - изображения не нужны.

пример:

<table style="border: 1px solid black">
<tr><th>name</th><th>value</th></tr>
<tr><td>hi</td><td><div style="height: 10px; width: 35px; background-color: #236611">35</div></td></tr>
<tr><td>yes</td><td><div style="height: 10px; width: 15px; background-color: #236611">15</div></td></tr>
<tr><td>see?</td><td><div style="height: 10px; width: 75px; background-color: #2366aa">75</div></td></tr>
</table>

... вы можете / должны настроить размеры, чтобы выглядеть лучше, конечно: -)

Answer 3

Лучший способ - вторая часть поста Саймона. Разместите div там, где вам это нужно, и измените ширину с помощью javascript или PHP (в зависимости от того, хотите ли вы, чтобы он динамически изменялся или нет), используя проценты. Используйте оператор if для цвета. Например, в JavaScript:

function displayGraph(barID, number)
{
    var color;
    if (number <= 20)
    {
        color = "red";
    }
    elseif (number > 20 && number <= 60)
    {
        color = "yellow";
    }
    else
    {
        color = "green";
    }

    var bar = document.getElementById(barID);
    bar.style.width = number + "%";
    bar.style.backgroundColor = color;
}

Я не проверял это точно, но что-то вроде этого должно работать.

Answer 4

Проверьте jQuery Sparkline , который предоставляет встроенные графики, аналогичные тому, что вы ищете. Если вы используете график с маркерами , вы можете отобразить хорошие / нормальные / плохие диапазоны, связанные с вашими данными, которые предоставляют огромное количество данных в очень маленьком пространстве.

Answer 5

Поскольку у вас уже есть данные в таблице, вы можете воспользоваться jQuery Visualize Plugin . Как только вы включите его, вы просто позвоните примерно так:

$('table').visualize();

и он строит график из вашей таблицы.

Answer 6

Если вы хотите, чтобы он также работал в автономном режиме, возможно, можно использовать flot .

Он основан на холсте и jquery.

Я еще не использовал его, но он есть в моем списке задач.

Пример кода кажется достаточно простым:

$(function () {
    var d1 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"), [ d1 ]);
});

Answer 7

Это не HTML, но вы смотрели в Google Charts? Это действительно довольно удивительно. http://code.google.com/apis/chart/