当前页面: 开发资料首页 → Javascript 专题 → 使用JavaScript绘制图形
使用JavaScript绘制图形
摘要: JavaScript
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
JAVASCRIPT经常通过用户提供的数据动态地生成条形图。总的来说这是由于条形图的简洁，它只是简单地由不确定长度的图形组成。我们使用JAVASCRIPT动态地画出每个图形，每个图形的长度和用户输入的数据有关。
我们需要的是以一个1x15的图形作为开始：
<table style="BACKGROUND: blue; WIDTH: 11.25pt; mso-cellspacing: 0cm; mso-padding-alt: 0cm 0cm 0cm 0cm" cellSpacing=0 cellPadding=0 width=15 bgColor=blue border=0> <tr> <td style="PADDING-RIGHT: 0cm; PADDING-LEFT: 0cm; PADDING-BOTTOM: 0cm; WIDTH: 100%; PADDING-TOP: 0cm" width="100%">
如果我想要拉长这幅图象到 50x15 ，我使用 JavaScript 这样做：
<script>document.write(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;i100document.write (graphtext[i]+': +graphvalue[i]/*barlength+'" height="15">
')</script>
Jill:
Bob:
Tony
代码的关键之处在于：width="'+graphvalue[i]/100*barlength+'"
这句话产生图形的宽度，这基于用户提供的数据。每个长度是输入值的百分比，然后乘以条形长度的基本长度。
2.
使用图形信息建立原始数据的图形。只给复杂图形的名称赋予一定的值（值可以是绝对值或百分比），剩下的留给脚本就行了。
图形信息允许你在同一个网页上生成不止一个图形文件，而这只需要多次的调用关键的函数。
Example:
<table style="WIDTH: 100%; mso-cellspacing: 0cm; mso-padding-alt: 0cm 0cm 0cm 0cm" cellSpacing=0 cellPadding=0 width="100%" border=0>
<tr> <td style="PADDING-RIGHT: 0cm; PADDING-LEFT: 0cm; PADDING-BOTTOM: 0cm; WIDTH: 50%; PADDING-TOP: 0cm" vAlign=top width="50%">Example 1 (using absolute values)
What is your favorite news site?
<table style="mso-cellspacing: 0cm; mso-padding-alt: 0cm 0cm 0cm 0cm" cellSpacing=0 cellPadding=0 border=0>
<tr> <td style="PADDING-RIGHT: 0cm; PADDING-LEFT: 0cm; PADDING-BOTTOM: 0cm; PADDING-TOP: 0cm">CNN
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />
MSNBC
ABC News
BBC News
Total participants: 211
Example 2 (using percentage values)
What is your favorite news site?
<table style="mso-cellspacing: 0cm; mso-padding-alt: 0cm 0cm 0cm 0cm" cellSpacing=0 cellPadding=0 border=0>
<tr> <td style="PADDING-RIGHT: 0cm; PADDING-LEFT: 0cm; PADDING-BOTTOM: 0cm; PADDING-TOP: 0cm">CNN
MSNBC
ABC News
BBC News
因为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 total+=parseInt(g[i][1]) output='<table border="0" cellspacing="0" cellpadding="0">' for (i=0;i calpercentage=Math.round(g[i][1]*100/total) calwidth=Math.round(gwidth*(calpercentage/100)) output+='<tr><td>'+g[i][0]+' </td><td> '+calpercentage+'%</td></tr>' } output+='</table>' document.write(output+' } //CALL GRAPHIT FUNCTION //graphit(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS) graphit(graphx,200) </script> This free script provided by JavaScript Kit 相对方式： 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 calwidthP=gwidth*(parseInt(g[i][1])/100) outputP+='<tr><td>'+g[i][0]+' </td><td> '+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> This free script provided by JavaScript Kit
Total participants: '+total+'')