这篇文章介绍了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>
