<div class="codetitle"> <span><a style="CURSOR: pointer" data="38204" class="copybut" id="copybut38204" onclick="doCopy('code38204')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code38204"> <br> <br> <br><title>JS百分比图和柱状图</title> <br><xml:namespace prefix="v"></xml:namespace> <br><style> <BR> v\:* {behavior=url(#default#VML)} <BR></style> <br><style> <BR>a:hover {color:maroon} <BR>h2 {color:#006600; <BR> margin-top: 0pt; <BR> margin-bottom: 0pt} <BR>h3 {color:#006600; <BR> margin-top: 6pt; <BR> margin-bottom: 3pt} <BR>h4 {color:#006600; <BR> font-family: Arial; <BR> font-size: 10pt; <BR> margin-top: 3pt; <BR> margin-bottom: 0pt} <BR>h5 {color:#006600; <BR> margin-top: 0pt; <BR> margin-bottom: 0pt} <BR>p {margin-top: 0pt; <BR> margin-bottom: 12pt} <BR></style> <br> <br> <br><style> p.Chart {font-size:8pt; font-family:"Times"; color:black; text-align:right; } </style> <br><div style="margin-top:12pt; position:relative; "> <br><group style="height:324pt;width:432pt" coordsize="4320,3240"> <br> <!-- Paper is white with a simple drop-shadow --> <br> <rect style="width:4320;height:3240" fillcolor="white"> <br> <shadow on="true" offset="4pt,3pt" color="silver"></shadow> <br> </rect> <br> <rect style="position:absolute;left:40;top:40;width:4240;height:3160;" fillcolor="#FFFFFF" strokeweight="1.5pt"></rect> <br> <p class="Chart" style='position:absolute;left:123.1pt;top:17.8pt;width:189.8pt;height:12.6pt;color:"#000080";font-style:italic;font-size:18pt;text-align:center;'>Sample Piechart</p> <br> <p class="Chart" style='position:absolute;left:225.5pt;top:310.4pt;width:198.5pt;height:5.6pt;color:"#008000";font-family:"Arial";'>Random numbers drawn as a simple pie</p> <br> <shape style="position:absolute; width:4320; height:3240" strokeweight="0.5pt" fillcolor="#DBDBED" path="M 2250 1590 AE 2250 1590 791 791 -3538944 9437184 X E"></shape> <br> <shape style="position:absolute;width:4320;height:3240" strokecolor="#000000" strokeweight="0.7pt"> <br> <stroke joinstyle="round" endcap="round"></stroke> <br> <fill on="false"></fill> <br> <path v=" M 3115 1309 L 2927 1370 E "></path> <br> </shape> <br> <p class="Chart" style="position:absolute;left:315.9pt;top:127.3pt;width:39.3pt;height:5.6pt; text-align=left; ">One: 30</p> <br> <shape style="position:absolute; width:4320; height:3240" strokeweight="0.5pt" fillcolor="#AA5555" path="M 2245 1629 AE 2245 1629 791 791 -9201254 5662310 X E"></shape> <br> <shape style="position:absolute;width:4320;height:3240" strokecolor="#000000" strokeweight="0.7pt"> <br> <stroke joinstyle="round" endcap="round"></stroke> <br> <fill on="false"></fill> <br> <path v=" M 3139 1329 M 2131 2532 L 2156 2336 E "></path> <br> </shape> <br> <p class="Chart" style="position:absolute;left:171.9pt;top:249.6pt;width:39.6pt;height:5.6pt;">Two: 18</p> <br> <shape style="position:absolute; width:4320; height:3240" strokeweight="0.5pt" fillcolor="#F2F8F8" path="M 2250 1590 AE 2250 1590 791 791 -13290701 4089446 X E"></shape> <br> <shape style="position:absolute;width:4320;height:3240" strokecolor="#000000" strokeweight="0.7pt"> <br> <stroke joinstyle="round" endcap="round"></stroke> <br> <fill on="false"></fill> <br> <path v=" M 2115 2552 M 1350 1723 L 1546 1694 E "></path> <br> </shape> <br> <p class="Chart" style="position:absolute;left:83.5pt;top:168.7pt;width:49.9pt;height:5.6pt;">Three: 13</p> <br> <shape style="position:absolute; width:4320; height:3240" strokeweight="0.5pt" fillcolor="#8BC58B" path="M 2193 1535 AE 2193 1535 791 791 -16121856 2831155 X E"></shape> <br> <shape style="position:absolute;width:4320;height:3240" strokecolor="#000000" strokeweight="0.7pt"> <br> <stroke joinstyle="round" endcap="round"></stroke> <br> <fill on="false"></fill> <br> <path v=" M 1334 1743 M 1544 898 L 1685 1037 E "></path> <br> </shape> <br> <p class="Chart" style="position:absolute;left:116.3pt;top:86.2pt;width:36.5pt;height:5.6pt;">Four: 9</p> <br> <shape style="position:absolute; width:4320; height:3240" strokeweight="0.5pt" fillcolor="#C080C0" path="M 2250 1590 AE 2250 1590 791 791 -17694720 1572864 X E"></shape> <br> <shape style="position:absolute;width:4320;height:3240" strokecolor="#000000" strokeweight="0.7pt"> <br> <stroke joinstyle="round" endcap="round"></stroke> <br> <fill on="false"></fill> <br> <path v=" M 1528 918 M 2061 700 L 2102 894 E "></path> <br> </shape> <br> <p class="Chart" style="position:absolute;left:174.1pt;top:66.4pt;width:30.4pt;height:5.6pt;">Five: 5</p> <br></group> </div> <br> <br> <br> <br><script language="JavaScript"> <BR>function displayTitle( title ) <BR>{ <BR> document.write("<center><i>" + title + "<br>"); <BR>} <BR>function generateRandomNumber(num) { <BR> return Math.round( Math.random() * (num - 1) ) + 1; <BR>} <BR>function plottablehead( val ) <BR>{ <BR> document.writeln("<table border = 0 bgcolor = black width = 10 height = 10 cellpadding = 0 cellspacing = 0>"); <BR> document.write("<tr> <i>" + val + ""); <BR>} <BR>function plottabletail() <BR>{ <BR> document.write("<br>"); <BR>} <BR>function plotcolor(d, clr) <BR>{ <BR> for(i=1;i<=d;i++){ <BR> document.write("<td bgcolor = " + clr + "> "); <BR> } <BR>} <BR>function setColor(foreground,background) <BR>{ <BR> document.fgColor=foreground; <BR> document.bgColor=background; <BR>} <BR>setColor("orange","black"); <BR>a=generateRandomNumber(50); <BR>plottablehead( a ); <BR>plotcolor(a, "red"); <BR>plottabletail(); <BR>a=generateRandomNumber(50); <BR>plottablehead( a ); <BR>plotcolor(a, "blue"); <BR>plottabletail(); <BR>a=generateRandomNumber(50); <BR>plottablehead( a ); <BR>plotcolor(a, "green"); <BR>plottabletail(); <BR>a=generateRandomNumber(50); <BR>plottablehead( a ); <BR>plotcolor(a, "yellow"); <BR>plottabletail(); <BR>a=generateRandomNumber(50); <BR>plottablehead( a ); <BR>plotcolor(a, "gray"); <BR>plottabletail(); <BR>a=generateRandomNumber(50); <BR>plottablehead( a ); <BR>plotcolor(a, "midnightblue"); <BR>plottabletail(); <BR>//--> <BR></script> <br> <br> <br> <br> </div>