如何在Web中实现饼形图的数据显示?

如何在Web中实现饼形图的数据显示? 并且把数据值显示在饼形图外部(用线指示)
---------------------------------------------------------------

使用组件teechart
或者teechartoffice,或者微软的office 自带的组件也可以
---------------------------------------------------------------

给你宝贝:

/////////////////////////////////

  1<html><head><title>GraPL:Demo charts:Piechart</title>
  2<xml:namespace prefix="v"></xml:namespace>
  3<style>   
  4v\:* {behavior=url(#default#VML)}   
  5</style>
  6<style>   
  7a:hover {color:maroon}   
  8h2 {color:#006600;   
  9margin-top: 0pt;   
 10margin-bottom: 0pt}   
 11h3 {color:#006600;   
 12margin-top: 6pt;   
 13margin-bottom: 3pt}   
 14h4 {color:#006600;   
 15font-family: Arial;   
 16font-size: 10pt;   
 17margin-top: 3pt;   
 18margin-bottom: 0pt}   
 19h5 {color:#006600;   
 20margin-top: 0pt;   
 21margin-bottom: 0pt}   
 22p {margin-top: 0pt;   
 23margin-bottom: 12pt}   
 24  
 25</style>
 26<style> p.Chart {font-size:8pt; font-family:"Times"; color:black; text-align:right; } </style>
 27</head>
 28<script language="JavaScript">   
 29function displayTitle( title )   
 30{   
 31document.write("<center><i>" + title + "</i></center><br>");   
 32}   
 33  
 34function generateRandomNumber(num) {   
 35return Math.round( Math.random() * (num - 1) ) + 1;   
 36}   
 37  
 38function plottablehead( val )   
 39{   
 40document.writeln("<table border = 0 bgcolor = black width = 10 height = 10 cellpadding = 0 cellspacing = 0>");   
 41document.write("<tr> <i>" + val + "</i>");   
 42}   
 43  
 44function plottabletail()   
 45{   
 46document.write("</tr></table><br>");   
 47}   
 48  
 49function plotcolor(d, clr)   
 50{   
 51for(i=1;i<=d;i++){   
 52document.write("<td bgcolor = " + clr + ">&nbsp;&nbsp;&nbsp;</td>");   
 53}   
 54}   
 55  
 56function setColor(foreground,background)   
 57{   
 58document.fgColor=foreground;   
 59document.bgColor=background;   
 60}   
 61  
 62setColor("orange","black");   
 63a=generateRandomNumber(50);   
 64plottablehead( a );   
 65plotcolor(a, "red");   
 66plottabletail();   
 67a=generateRandomNumber(50);   
 68plottablehead( a );   
 69plotcolor(a, "blue");   
 70plottabletail();   
 71a=generateRandomNumber(50);   
 72plottablehead( a );   
 73plotcolor(a, "green");   
 74plottabletail();   
 75a=generateRandomNumber(50);   
 76plottablehead( a );   
 77plotcolor(a, "yellow");   
 78plottabletail();   
 79a=generateRandomNumber(50);   
 80plottablehead( a );   
 81plotcolor(a, "gray");   
 82plottabletail();   
 83a=generateRandomNumber(50);   
 84plottablehead( a );   
 85plotcolor(a, "midnightblue");   
 86plottabletail();   
 87//-->   
 88</script>
 89<body bgcolor="#FFFFFF" leftmargin="6" link="#006600" text="#000000" topmargin="6" vlink="#006600">
 90<div style="margin-top:12pt; position:relative; ">
 91<v:group coordsize="4320,3240" style="height:324pt;width:432pt">
 92<!-- Paper is white with a simple drop-shadow -->
 93<v:rect fillcolor="white" style="width:4320;height:3240">
 94<v:shadow color="silver" offset="4pt,3pt" on="true"></v:shadow>
 95</v:rect>
 96<v:rect fillcolor="#FFFFFF" strokeweight="1.5pt" style="position:absolute;left:40;top:40;width:4240;height:3160;"></v:rect>
 97<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   
 98Piechart</p>
 99<p class="Chart" style='position:absolute;left:225.5pt;top:310.4pt;width:198.5pt;height:5.6pt;color:"#008000";font-family:"Arial";'> </p>
100<v:shape fillcolor="#DBDBED" path="M 2250 1590 AE 2250 1590 791 791 -3538944 9437184 X E" strokeweight="0.5pt" style="position:absolute; width:4320; height:3240"></v:shape>
101<v:shape strokecolor="#000000" strokeweight="0.7pt" style="position:absolute;width:4320;height:3240">
102<v:stroke endcap="round" joinstyle="round"></v:stroke>
103<v:fill on="false"></v:fill>
104<v:path v=" M 3115 1309 L 2927 1370 E "></v:path>
105</v:shape>
106<p class="Chart" style="position:absolute;left:315.9pt;top:127.3pt;width:39.3pt;height:5.6pt; text-align=left; ">One: 30</p>
107<v:shape fillcolor="#AA5555" path="M 2245 1629 AE 2245 1629 791 791 -9201254 5662310 X E" strokeweight="0.5pt" style="position:absolute; width:4320; height:3240"></v:shape>
108<v:shape strokecolor="#000000" strokeweight="0.7pt" style="position:absolute;width:4320;height:3240">
109<v:stroke endcap="round" joinstyle="round"></v:stroke>
110<v:fill on="false"></v:fill>
111<v:path v=" M 3139 1329 M 2131 2532 L 2156 2336 E "></v:path>
112</v:shape>
113<p class="Chart" style="position:absolute;left:171.9pt;top:249.6pt;width:39.6pt;height:5.6pt;">Two: 18</p>
114<v:shape fillcolor="#F2F8F8" path="M 2250 1590 AE 2250 1590 791 791 -13290701 4089446 X E" strokeweight="0.5pt" style="position:absolute; width:4320; height:3240"></v:shape>
115<v:shape strokecolor="#000000" strokeweight="0.7pt" style="position:absolute;width:4320;height:3240">
116<v:stroke endcap="round" joinstyle="round"></v:stroke>
117<v:fill on="false"></v:fill>
118<v:path v=" M 2115 2552 M 1350 1723 L 1546 1694 E "></v:path>
119</v:shape>
120<p class="Chart" style="position:absolute;left:83.5pt;top:168.7pt;width:49.9pt;height:5.6pt;">Three: 13</p>
121<v:shape fillcolor="#8BC58B" path="M 2193 1535 AE 2193 1535 791 791 -16121856 2831155 X E" strokeweight="0.5pt" style="position:absolute; width:4320; height:3240"></v:shape>
122<v:shape strokecolor="#000000" strokeweight="0.7pt" style="position:absolute;width:4320;height:3240">
123<v:stroke endcap="round" joinstyle="round"></v:stroke>
124<v:fill on="false"></v:fill>
125<v:path v=" M 1334 1743 M 1544 898 L 1685 1037 E "></v:path>
126</v:shape>
127<p class="Chart" style="position:absolute;left:116.3pt;top:86.2pt;width:36.5pt;height:5.6pt;">Four: 9</p>
128<v:shape fillcolor="#C080C0" path="M 2250 1590 AE 2250 1590 791 791 -17694720 1572864 X E" strokeweight="0.5pt" style="position:absolute; width:4320; height:3240"></v:shape>
129<v:shape strokecolor="#000000" strokeweight="0.7pt" style="position:absolute;width:4320;height:3240">
130<v:stroke endcap="round" joinstyle="round"></v:stroke>
131<v:fill on="false"></v:fill>
132<v:path v=" M 1528 918 M 2061 700 L 2102 894 E "></v:path>
133</v:shape>
134<p class="Chart" style="position:absolute;left:174.1pt;top:66.4pt;width:30.4pt;height:5.6pt;">Five: 5</p>
135</v:group></div>
136<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
137<a href="myjs.htm" target="_blank"><font color="red"> My Js Collection!</font></a><br/></div>
138</body>
139</html>

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

用组件生成图片,然后显示吧。shotgraph.dll
---------------------------------------------------------------

www.ourfly.com的投票程序

Published At
Categories with Web编程
comments powered by Disqus