在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语句。对于ex，在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，类似于您要查找的内容。如果使用bullet graph，则可以显示与数据关联的正常/正常/不良范围，这些范围在非常小的空间内提供大量数据。

Answer 5

由于您已将数据放在表格中，因此可以查看jQuery Visualize Plugin。一旦你加入它，你只需要打电话：

$('table').visualize();

它会从你的表格中构建一个图表。

Answer 6

如果你想让它离线工作，也许可以使用flot。

它基于canvas和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/