在HTML/Javascript中将数字自动转换为彩色条

我想从一些自定义数据自动生成一个HTML表。我的数据中有一列是0-100范围内的数字，我想用更图形化的方式显示它，最好是一个彩色的水平条。条形图的长度将表示该值，颜色也会改变（即低于20时为红色，等等）

类似这样的内容（使用paint.net创建）：

（来源：）

实现这一点的一种方法是生成适当的.PNG并将其作为图像放置在那里。但我认为它可能可以通过一些HTML/CSS/Javascript的混合自动完成（即，抛出到表中的值是数字，JS在显示之前将它们转换为条形）

也许有人已经做了类似的事情，可以分享吗

提前谢谢

附言：如果它能在IE6中工作，那将是最好的（不要问…）

---

p.p.S:它应该离线工作，所以现有的网络服务（如谷歌图表）不会有帮助

它不是HTML，但你看过谷歌图表了吗？真是太神奇了。 这是可行的

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>

名称值
hi35
是15
看到了吗？75

---

。。。当然，您可以/应该调整大小以使其看起来更漂亮：-）

Alistampart有一篇关于如何使用纯CSS生成图表的精彩文章。它很好，因为它是可访问的，这意味着即使没有CSS，它也将提供有意义的数据

---

更新：根据一位对此答案的评论，此解决方案也适用于IE6。

最好的方法是西蒙文章的第二部分。在需要的地方放置一个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;
}

函数显示图（barID，数字）
{
颜色变异；
如果（数字20&&number如果您希望它也可以脱机工作，那么可以使用

它基于canvas和jquery

我还没用过，但它在我的待办事项清单上

示例代码似乎很简单：

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

查看提供内联图表的，与您正在查找的图表类似。如果使用，您可以在非常小的空间内显示与数据相关的良好/正常/不良范围，从而提供大量数据。
由于您的数据已经存在于表中，您可以签出。一旦包含它，您只需调用somet即可他喜欢：

$('table').visualize();

它可以从你的表格中生成一个图表。
是的，它们很酷，但不幸不是我需要的。补充p.p.S:必须让它在互联网上运行。嗯，这肯定会破坏计划；）Alistaparat的例子很好，我在我的工作网站上使用了一个修改版，效果很好。我真的不知道。我目前没有办法在IE6上测试它，但你应该在IE6上试用他们的演示页面。这会让你马上知道。如果有人能帮我确认这一点，那就太好了。你可以将常见高度计算到CSS c中少女