如何在HTML中绘一个条状图,如何实现(使用什么都可以)

如何在HTML中绘一个条状图,如何实现,给出原代码或发一份到我的邮箱,请附出原代码.使用什么语言都可以,请附上一个便用例子以便我得到一个样例效果,效果最好的给最高分
---------------------------------------------------------------

参考

http://expert.csdn.net/Expert/topic/857/857414.xml?temp=.900448
---------------------------------------------------------------

简单点的用不同颜色的图片或者背景色就可以实现了,网上很多调查结果好像都是这样做的:
http://www.tyfo.com/tanfoplan/diaocha/dc2.htm
---------------------------------------------------------------

用表格就可以。不同的背景色。把数字做表格高度
---------------------------------------------------------------

http://developer.netscape.com/docs/technote/javascript/graph/

Javascript Grap Builder
---------------------------------------------------------------

http://www.ourfly.com/article/article.aspx这里有一些实例。owc比较好
---------------------------------------------------------------

用VML啊!

 1<html xmlns:v="">
 2<head>
 3<meta content="text/html; Charset=gb2312" http-equiv="Content-Type"/>
 4<title></title>
 5<style>   
 6body,td{font-size:12px}   
 7v\:*{behavior:url(#default#VML);}   
 8</style>
 9</head>
10<body bgcolor="eeeeee" style="border:0 solid eeeeee">   
11共有<font color="red">69</font>人参与过投票<br/>
12<script>   
13array1=new Array(16,14,10,16,5,8) //不同的投票票数   
14array2=new Array('#FF9900','#999933','#66CC00','#990000','#0066CC','#CCCC00') //不同的颜色   
15allstr=array1[0]+array1[1]+array1[2]+array1[3]+array1[4]+array1[5] //得到总数   
16for(i=0;i<=5;i++){   
17mathstr=Math.round(100/(allstr/array1[i])) //求百分之几, 100/(总和/单个)   
18document.write ("<v:rect fillcolor='"+array2[i]+"' style='width:"+5000/(1000/mathstr)+";color:#ffffff;height:25;valign:middle'><br>&nbsp;"+mathstr+"% "+array1[i]+"人<v:Extrusion backdepth='5pt' on='true'/></v:rect><br>")   
19}   
20</script>
21<p>
22<table width="190"><tr><td>   
23增加新的栏目版块</td><td>16人</td></tr><tr><td>   
24完善娱乐视听</td><td>14人</td></tr><tr><td>   
25完善技术文章</td><td>10人</td></tr><tr><td>   
26完善下载中心</td><td>16人</td></tr><tr><td>   
27完善在线工具</td><td>5人</td></tr><tr><td>   
28完善程式交流论坛</td><td>8人</td></tr></table><p>
29<a href="javascript:self.close()" style="text-Decoration:none;">〖关闭窗口〗</a><p>
30</p></p></p></body>
31</html>

---------------------------------------------------------------

http://expert.csdn.net/Expert/topic/1295/1295756.xml?temp=.6044123

Published At
Categories with Web编程
Tagged with
comments powered by Disqus