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

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

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

更新:

这是可行的。

2种选择:

例子:

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

... 当然,您可以/应该调整尺寸,使其看起来更漂亮:-)

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

我并没有测试这个,但类似的东西应该会起作用。

查看 jQuery Sparkline 它提供内联图表,类似于您正在寻找的。如果你使用 bullet graph

由于表中已经有数据,您可以签出 jQuery Visualize Plugin

$('table').visualize();

它将从您的表中构建一个图形。

flot 可以使用。

它基于canvas和jquery。

示例代码似乎很简单:

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

http://code.google.com/apis/chart/