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

這篇文章介紹了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