# 使用JavaScript绘制图形

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

1.

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

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

<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

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

 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%

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

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

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>

• 本文已收录于以下专栏：

## 用CSS3绘制图形

• xzh_loop
• 2014年07月21日 21:45
• 3105

## 刷清橙OJ--A1033.绘制图形

• qq_31725785
• 2017年05月25日 08:43
• 125

## html5之canvas绘制图形的简单使用

• u012859748
• 2016年09月11日 21:49
• 866

## Java中常见图形绘制方式与实现

• cping1982
• 2009年06月01日 22:41
• 10911

## 使用Windows GDI绘制图形

1.选择画笔 　　画笔是用来画线的工具，是CPen类的对象。CPen类封闭了一个Windows GDI画笔，并提供了用于操作画笔对象的若干种方法。 　　(1)声明画笔对象 　　CPe...
• yichao12
• 2016年01月19日 15:36
• 215

## 绘制图形

/*问题描述 找出下面给出图形的规律，给出n，画一个n行的对应图形。 1 2 3 4 12 13 14 5 11 16 15 6 10 9 8 7 输入格式 输入包含一个数n。1...
• liangguojunainia
• 2014年03月07日 10:03
• 370

## VB绘制图形

• jiuqiyuliang
• 2012年02月13日 10:50
• 1228

## 使用D2D接口绘制图形

• qiuchangyong
• 2017年02月05日 17:35
• 273

## iOS 使用UIBezierPath 绘制图形

• sinat_30162391
• 2017年04月01日 00:15
• 804

## 使用java绘制图形验证码

• l576397042
• 2016年10月13日 22:02
• 79

举报原因： 您举报文章：使用JavaScript绘制图形 色情 政治 抄袭 广告 招聘 骂人 其他 (最多只允许输入30个字)