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

我想从一些自定义数据自动生成HTML表.我的数据中的一列是0-100范围内的数字,我想以更加图形化的方式显示它,最希望是彩色水平条.条形的长度代表值,颜色也会改变(即低于20,它是红色等)

像这样的东西(用paint.net创建):

_{(来源:thegreenplace.net)}

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

也许某人已经做过这样的事情并且可以分享？

提前致谢

PS:如果它可以在IE6中工作,那将是最好的(不要问......)

PPS:它应该脱机工作,因此现有的Web服务(如Google图表)无济于事

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

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

更新:根据这个答案的评论者之一,这个解决方案也适用于IE6.