熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JavaScript根據數據生成百分比圖和柱狀圖的實例代碼

2013-11-15 11:55:36  來源: JSP教程 
這篇文章介紹了JavaScript根據數據生成百分比圖和柱狀圖的實例代碼有需要的朋友可以參考一下   復制代碼 代碼如下:

  
<HTML>
<head>
<title>JS百分比圖和柱狀圖</title>  
<xml:namespace prefix="v"/>  
<style>  
 v:* {behavior=url(#default#VML)}  
</style>  
<style>  
a:hover {color:maroon}  
h {color:#;  
       margintop: pt;  
       marginbottom: pt}  
h {color:#;  
       margintop: pt;  
       marginbottom: pt}  
h {color:#;  
       fontfamily: Arial;  
       fontsize: pt;  
       margintop: pt;  
       marginbottom: pt}  
h {color:#;  
       margintop: pt;  
       marginbottom: pt}  
p  {margintop: pt;  
       marginbottom: pt}  
</style>  
</head>  
<BODY text="#" bgcolor="#FFFFFF" link="#" vlink="#" leftmargin= topmargin=>  
<style> pChart {fontsize:pt; fontfamily:"Times"; color:black; textalign:right; } </style>  
<div style=margintop:pt; position:relative; >  
<v:group style=height:pt;width:pt coordsize="">  
 <! Paper is white with a simple dropshadow >  
 <v:rect style=width:;height: fillcolor="white">  
  <v:shadow on="true" offset="ptpt" color="silver" />  
 </v:rect>  
 <v:rect style=position:absolute;left:;top:;width:;height:; fillcolor="#FFFFFF" strokeweight=pt />
 <p class=Chart style=position:absolute;left:pt;top:pt;width:pt;height:pt;color:"#";fontstyle:italic;fontsize:pt;textalign:center;>Sample Piechart</p>  
 <p class=Chart style=position:absolute;left:pt;top:pt;width:pt;height:pt;color:"#";fontfamily:"Arial";>Random numbers drawn as a simple pie</p>  
 <v:shape style=position:absolute; width:; height: strokeweight=pt fillcolor="#DBDBED" path="M AE X E" />  
 <v:shape style=position:absolute;width:;height: strokecolor="#" strokeweight=pt >  
  <v:stroke joinstyle=round endcap=round />  
  <v:fill on="false" />  
  <v:path v=" M L E "/>  
 </v:shape>  
 <p class=Chart style=position:absolute;left:pt;top:pt;width:pt;height:pt; textalign=left; >One: </p>  
 <v:shape style=position:absolute; width:; height: strokeweight=pt fillcolor="#AA" path="M AE X E" />  
 <v:shape style=position:absolute;width:;height: strokecolor="#" strokeweight=pt >  
  <v:stroke joinstyle=round endcap=round />  
  <v:fill on="false" />  
  <v:path v=" M M L E "/>  
 </v:shape>  
 <p class=Chart style=position:absolute;left:pt;top:pt;width:pt;height:pt;>Two: </p>  
 <v:shape style=position:absolute; width:; height: strokeweight=pt fillcolor="#FFF" path="M AE X E" />  
 <v:shape style=position:absolute;width:;height: strokecolor="#" strokeweight=pt >  
  <v:stroke joinstyle=round endcap=round />  
  <v:fill on="false" />  
  <v:path v=" M M L E "/>  
 </v:shape>  
 <p class=Chart style=position:absolute;left:pt;top:pt;width:pt;height:pt;>Three: </p>  
 <v:shape style=position:absolute; width:; height: strokeweight=pt fillcolor="#BCB" path="M AE X E" />  
 <v:shape style=position:absolute;width:;height: strokecolor="#" strokeweight=pt >  
  <v:stroke joinstyle=round endcap=round />  
  <v:fill on="false" />  
  <v:path v=" M M L E "/>  
 </v:shape>  
 <p class=Chart style=position:absolute;left:pt;top:pt;width:pt;height:pt;>Four: </p>  
 <v:shape style=position:absolute; width:; height: strokeweight=pt fillcolor="#CC" path="M AE X E" />  
 <v:shape style=position:absolute;width:;height: strokecolor="#" strokeweight=pt >  
  <v:stroke joinstyle=round endcap=round />  
  <v:fill on="false" />  
  <v:path v=" M M L E "/>  
 </v:shape>  
 <p class=Chart style=position:absolute;left:pt;top:pt;width:pt;height:pt;>Five: </p>  
</v:group></div>   
<html>  
<head>  
</head>  
<script language=JavaScript>  
function displayTitle( title )  
{  
   documentwrite("<center><i>" + title + "</i></center><br>");  
}  
function generateRandomNumber(num) {  
  return Mathround( Mathrandom() * (num ) ) + ;  
}  
function plottablehead(  val )  
{  
   documentwriteln("<table border = bgcolor = black width = height = cellpadding = cellspacing = >");  
   documentwrite("<tr> <i>" + val + "</i>");  
}  
function plottabletail()  
{  
  documentwrite("</tr></table><br>");  
}  
function plotcolor(d clr)  
{  
    for(i=;i<=d;i++){  
  documentwrite("<td bgcolor = " + clr + ">   </td>");  
 }  
}  
function setColor(foregroundbackground)  
{  
  documentfgColor=foreground;  
  documentbgColor=background;  
}  
setColor("orange""black");  
a=generateRandomNumber();  
plottablehead( a );  
plotcolor(a "red");  
plottabletail();  
a=generateRandomNumber();  
plottablehead( a );  
plotcolor(a "blue");  
plottabletail();  
a=generateRandomNumber();  
plottablehead( a );  
plotcolor(a "green");  
plottabletail();  
a=generateRandomNumber();  
plottablehead( a );  
plotcolor(a "yellow");  
plottabletail();  
a=generateRandomNumber();  
plottablehead( a );  
plotcolor(a "gray");  
plottabletail();  
a=generateRandomNumber();  
plottablehead( a );  
plotcolor(a "midnightblue");  
plottabletail();  
//>  
</script>  
</head>  
</body>  
</html>  


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19906.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.