使用JavaScript绘制图形

发布: 2007-7-01 20:40 | 作者: admin | 来源: | 查看: 53次 | 进入软件测试论坛讨论

1.

JAVASCRIPT经常通过用户提供的数据动态地生成条形图。总的来说这是由于条形图的简洁，它只是简单地由不确定长度的图形组成。我们使用JAVASCRIPT动态地画出每个图形，每个图形的长度和用户输入的数据有关。

我们需要的是以一个1x15的图形作为开始：

如果我想要拉长这幅图象到 50x15 ，我使用 JavaScript 这样做：

<script>
document.write(<img src="poll.gif" width="50" height="15">´)
</script>

这就形成了动态图形的基础。这是一个我用JAVASCRIPT写的一个简单的脚本，它用来说明了图形创建的例子。

<script>
var graphtext=new Array("Jill", "Bob", "Tony") //图形项目
var graphvalue=new Array("60", "45", "95") //图形值 (使用的是百分比，例如70=70%)
var barlength=200
for (i=0;i<graphtext.length;i++)
document.write (graphtext[i]+´: <img src="poll.gif" width="´+graphvalue[i]/100*barlength+´" height="15"><br>´)
</script>

Jill:

Bob:

Tony

代码的关键之处在于：width="´+graphvalue[i]/100*barlength+´"

这句话产生图形的宽度，这基于用户提供的数据。每个长度是输入值的百分比，然后乘以条形长度的基本长度。

2.


使用图形信息建立原始数据的图形。只给复杂图形的名称赋予一定的值（值可以是绝对值或百分比），剩下的留给脚本就行了。
图形信息允许你在同一个网页上生成不止一个图形文件，而这只需要多次的调用关键的函数。
Example: 





Example 1 (using absolute values)

 
What is your favorite news site?





CNN 

28%


MSNBC 

36%


ABC News 

11%


BBC News 

25%

Total participants: 211
Example 2 (using percentage values)
What is your favorite news site? 





CNN 

28%


MSNBC 

36%


ABC News 

11%


BBC News 

25%

 
因为EXAMPLE 1是用绝对值来创建的，脚本也在最后显示了总值。
指导
步骤一：下面是图形信息的两个版本。第一个要求图形值是绝对值，而第二个是相对值。
绝对方式：
What is your favorite news site?
 
<script language="JavaScript1.2">
 
//JavaScript Graph-it! (Absolute)- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use
 
var graphimage="poll.gif"
 
//DEFINE GRAPH VALUES [Item name, absolute value]
var graphx=new Array()
graphx[0]=["CNN",60]
graphx[1]=["MSNBC",75]
graphx[2]=["ABC News",24]
graphx[3]=["BBC News",52]
 
//YOU CAN DEFINE MULTIPLE GRAPHS, eg:
//var graphy=new Array()
 
 
function graphit(g,gwidth){
total=0
for (i=0;i<g.length;i++)
total+=parseInt(g[i][1])
 
output=´<table border="0" cellspacing="0" cellpadding="0">´
for (i=0;i<g.length;i++){
calpercentage=Math.round(g[i][1]*100/total)
calwidth=Math.round(gwidth*(calpercentage/100))
output+=´<tr><td>´+g[i][0]+´&nbsp;</td><td><img src="´+graphimage+´" width="´+calwidth+´" height="10"> ´+calpercentage+´%</td></tr>´
}
output+=´</table>´
document.write(output+´<br>Total participants: <b>´+total+´</b>´)
}
 
//CALL GRAPHIT FUNCTION
//graphit(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)
graphit(graphx,200)
</script>
 
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://www.javascriptkit.com">JavaScript
Kit</a></font></p>
相对方式：
What is your favorite news site?
 
<script language="JavaScript1.2">
 
//JavaScript Graph-it! (Percentage)- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use
 
var graphimageP="poll.gif"
 
//DEFINE GRAPH VALUES [Item name, Percentage value]
var graphv=new Array()
graphv[0]=["CNN","28%"]
graphv[1]=["MSNBC","36%"]
graphv[2]=["ABC News","11%"]
graphv[3]=["BBC News","25%"]
 
//YOU CAN DEFINE MULTIPLE GRAPHS, eg:
//var graphz=new Array()
 
 
function graphitP(g,gwidth){
 
outputP=´<table border="0" cellspacing="0" cellpadding="0">´
for (i=0;i<g.length;i++){
calwidthP=gwidth*(parseInt(g[i][1])/100)
outputP+=´<tr><td>´+g[i][0]+´&nbsp;</td><td><img src="´+graphimageP+´" width="´+calwidthP+´" height="10"> ´+g[i][1]+´</td></tr>´
}
outputP+=´</table>´
document.write(outputP)
}
 
//CALL GRAPHIT FUNCTION
//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)
graphitP(graphv,200)
</script>
 
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://www.javascriptkit.com">JavaScript
Kit</a></font></p>