酷炫的图表对象，用于在您的网页中绘制柱状图和折线图。

Wagner DosAnjos

4.60/5 (39投票s)

2002年12月16日

265007

3123

JavaScript 图表对象，用于绘制柱状图和折线图。仅需要 JavaScript 和 DHTML。

下载源代码文件 - 8.05 Kb

Horizontal

屏幕截图 1 - 水平条形/折线图

Vertical

屏幕截图 2 - 垂直条形/折线图

引言

浏览器兼容性

IE 5.5+
NS 6+

限制

仅处理正值。
仅支持每个页面一个图表。
在 Netscape 中，不支持折线图。

用法

下面的脚本使用 Graph 对象来绘制柱状图和折线图

<HTML>
<head>
<script language=JavaScript src=Graph.js></script>
</head>
<BODY style="font-family: Arial;">
<table align=center>
    <tr>
        <td width="5%"></td>
        <td id=here align=center></td>
        <td valign=top width="5%"><a href="">Help</a></td>
    </tr>
</table>
</body>
</html>
<script language=JavaScript>
var bg = new Graph(10);

bg.parent = document.getElementById('here');
bg.title = 'Current Top 10 Servers';
bg.xCaption = 'Servers';
bg.yCaption = 'Number of Connetions<br>per Server';

bg.xValues[0] = [188,'Rio de Janeiro'];
bg.xValues[1] = [180,'Sao Paulo'];
bg.xValues[2] = [159,'Brasilia'];
bg.xValues[3] = [67 ,'Belo Horizonte'];
bg.xValues[4] = [66 ,'Fortaleza'];
bg.xValues[5] = [62 ,'Manaus'];
bg.xValues[6] = [48 ,'Porto Alegre'];
bg.xValues[7] = [26 ,'Curitiba'];
bg.xValues[8] = [16 ,'Salvador'];
bg.xValues[9] = [11 ,'Natal'];

bg.showLine = true;
bg.showBar = true;
bg.orientation = 'horizontal'; // or = 'vertical';

bg.draw();
</script>
</body>
</html>

变更历史

2003-03-10：发布 v2.1
- 对 Netscape 6+ 的有限支持
2003-09-30：发布 v2.0
- 支持垂直方向
- Bug 修复
- 新的属性
2002-12-16：发布 v1.0