![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1
<HTML>
2
<head>
3
<title>JS百分比图和柱状图</title>
4
<xml:namespace prefix="v"/>
5![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style>
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
v\:* {
}{behavior=url(#default#VML)}
7
</style>
8![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style>
9![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
a:hover {
}{color:maroon}
10![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
h2 {
}{color:#006600;
11
margin-top: 0pt;
12
margin-bottom: 0pt}
13![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
h3 {
}{color:#006600;
14
margin-top: 6pt;
15
margin-bottom: 3pt}
16![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
h4 {
}{color:#006600;
17
font-family: Arial;
18
font-size: 10pt;
19
margin-top: 3pt;
20
margin-bottom: 0pt}
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
h5 {
}{color:#006600;
22
margin-top: 0pt;
23
margin-bottom: 0pt}
24![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
p {
}{margin-top: 0pt;
25
margin-bottom: 12pt}
26![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
27
</style>
28
</head>
29
<BODY text="#000000" bgcolor="#FFFFFF" link="#006600" vlink="#006600" leftmargin=6 topmargin=6>
30![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style>
p.Chart {
}{font-size:8pt; font-family:"Times"; color:black; text-align:right; } </style>
31
<div style='margin-top:12pt; position:relative; '>
32
<v:group style='height:324pt;width:432pt' coordsize="4320,3240">
33![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
34
<!-- Paper is white with a simple drop-shadow -->
35
<v:rect style='width:4320;height:3240' fillcolor="white">
36
<v:shadow on="true" offset="4pt,3pt" color="silver" />
37
</v:rect>
38![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
39
<v:rect style='position:absolute;left:40;top:40;width:4240;height:3160;' fillcolor="#FFFFFF" strokeweight=1.5pt />
40![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
41
<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>
42
<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>
43
<v: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" />
44
<v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >
45
<v:stroke joinstyle=round endcap=round />
46
<v:fill on="false" />
47
<v:path v=" M 3115 1309 L 2927 1370 E "/>
48
</v:shape>
49
<p class=Chart style='position:absolute;left:315.9pt;top:127.3pt;width:39.3pt;height:5.6pt; text-align=left; '>One: 30</p>
50
<v: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" />
51
<v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >
52
<v:stroke joinstyle=round endcap=round />
53
<v:fill on="false" />
54
<v:path v=" M 3139 1329 M 2131 2532 L 2156 2336 E "/>
55
</v:shape>
56
<p class=Chart style='position:absolute;left:171.9pt;top:249.6pt;width:39.6pt;height:5.6pt;'>Two: 18</p>
57
<v: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" />
58
<v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >
59
<v:stroke joinstyle=round endcap=round />
60
<v:fill on="false" />
61
<v:path v=" M 2115 2552 M 1350 1723 L 1546 1694 E "/>
62
</v:shape>
63
<p class=Chart style='position:absolute;left:83.5pt;top:168.7pt;width:49.9pt;height:5.6pt;'>Three: 13</p>
64
<v: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" />
65
<v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >
66
<v:stroke joinstyle=round endcap=round />
67
<v:fill on="false" />
68
<v:path v=" M 1334 1743 M 1544 898 L 1685 1037 E "/>
69
</v:shape>
70
<p class=Chart style='position:absolute;left:116.3pt;top:86.2pt;width:36.5pt;height:5.6pt;'>Four: 9</p>
71
<v: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" />
72
<v:shape style='position:absolute;width:4320;height:3240' strokecolor="#000000" strokeweight=0.7pt >
73
<v:stroke joinstyle=round endcap=round />
74
<v:fill on="false" />
75
<v:path v=" M 1528 918 M 2061 700 L 2102 894 E "/>
76
</v:shape>
77
<p class=Chart style='position:absolute;left:174.1pt;top:66.4pt;width:30.4pt;height:5.6pt;'>Five: 5</p>
78
</v:group></div>
79
<html>
80
<head>
81
</head>
82![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
83![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language=JavaScript>
84
function displayTitle( title )
85![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
86
document.write("<center><i>" + title + "</i></center><br>");
87
}
88![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
89![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function generateRandomNumber(num)
{
90
return Math.round( Math.random() * (num - 1) ) + 1;
91
}
92![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
93
function plottablehead( val )
94![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
95
document.writeln("<table border = 0 bgcolor = black width = 10 height = 10 cellpadding = 0 cellspacing = 0>");
96
document.write("<tr> <i>" + val + "</i>");
97
}
98![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
99
function plottabletail()
100![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
101
document.write("</tr></table><br>");
102
}
103![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
104
function plotcolor(d, clr)
105![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
106![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(i=1;i<=d;i++)
{
107
document.write("<td bgcolor = " + clr + "> </td>");
108
}
109
}
110![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
111
function setColor(foreground,background)
112![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
113
document.fgColor=foreground;
114
document.bgColor=background;
115
}
116![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
117
setColor("orange","black");
118
a=generateRandomNumber(50);
119
plottablehead( a );
120
plotcolor(a, "red");
121
plottabletail();
122
a=generateRandomNumber(50);
123
plottablehead( a );
124
plotcolor(a, "blue");
125
plottabletail();
126
a=generateRandomNumber(50);
127
plottablehead( a );
128
plotcolor(a, "green");
129
plottabletail();
130
a=generateRandomNumber(50);
131
plottablehead( a );
132
plotcolor(a, "yellow");
133
plottabletail();
134
a=generateRandomNumber(50);
135
plottablehead( a );
136
plotcolor(a, "gray");
137
plottabletail();
138
a=generateRandomNumber(50);
139
plottablehead( a );
140
plotcolor(a, "midnightblue");
141
plottabletail();
142
//-->
143
</script>
144
</head>
145
</body>
146
</html>
147![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
148![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
posted @
2009-10-14 09:34
旭 日
阅读(
522)
评论()
编辑
收藏
举报