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

Question

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

类似这样（使用paint.net创建）：
_{(来源: thegreenplace.net)} 可以通过生成适当的.PNG并将其放置为图像来实现此目的。但我认为可以用HTML/CSS/Javascript的某种组合自动完成（即将投入表格的值为数字，JS在显示之前将其转换为条形图）。

也许有人已经做过类似的事情并且可以分享？

谢谢提前。

附注：如果能在IE6中运行，那就最好了（不要问为什么...）

另外，它应该可以离线工作，因此现有的网络服务（如Google图表）将无法帮助。

- eliben

Answer 1

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

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

更新：根据本回答的一位评论者所说，这个解决方案也适用于IE6。

- DanHerbert

---

AListApart的示例非常棒，我在我的工作网站上使用了它的修改版本，效果非常好。 - Justin Yost

我真的不知道。我目前没有办法在IE6上测试它，但你应该在IE6上尝试他们的演示页面。那样你就能立刻知道了。如果有人能为我确认一下，那就太好了。 - Dan Herbert

Answer 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>

当然，您可以/应该调整大小以使其更美观 :-)

- Simon Groenewolt

---

你可以将常见的高度因素提取到一个CSS类中。 - bandi

Answer 3

最好的方法是simon帖子的第二部分。在需要的任何位置放置一个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;
}

我没有确切测试过这个，但类似的东西应该可以工作。

- Logan Serman

Answer 4

请看一下jQuery Sparkline，它提供了内联图表，与您所需的类似。如果您使用子弹图，您可以显示与数据相关的良好/正常/不良范围，这样可以在非常小的空间内提供大量数据。

- David Thomas Garcia

Answer 5

既然您已经将数据放在表格中，您可以尝试使用jQuery Visualize Plugin。一旦包含它，您只需要调用类似以下的代码：

$('table').visualize();

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

- Derek Kurth

Answer 6

如果您想让它离线工作，也许可以使用flot。它基于canvas和jquery。

我还没有使用过它，但它在我的待办列表上。

示例代码似乎足够简单：

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

- Kobi

Answer 7

这不是HTML，但你看过Google Charts吗？它真的非常惊人。 http://code.google.com/apis/chart/

- Matt Darby

---

是的，它们很酷，但不幸的是不是我所需要的。另外附言：必须要能够在互联网上运行。 - Eli Bendersky

啊。那肯定会打乱计划的 ;) - Matt Darby