<html> <head> <title>柱状图</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF"> <? /* Written by Caocao. http://caocao.oso.com.cn [email protected] */ class bar { var $bar_width=15;//柱宽 var $bar_height=400;//最大柱高 var $bar_color_light="CCCCCC";//柱色 var $bar_color_dark="000000";//阴影色 var $shadow=3;//阴影深度 var $space=5;//柱间距 var $data;//数据 var $result;//结果 var $style=1;//柱图样式 var $ispercent=1;//是否用百分比
function set_width_height($bar_width_input,$bar_height_input)//设置柱宽柱高 { $this->bar_width=$bar_width_input; $this->bar_height=$bar_height_input; }
function set_bar_color($bar_color_light_input,$bar_color_dark_input)//设置柱色阴影色 { $this->bar_color_light=$bar_color_light_input; $this->bar_color_dark=$bar_color_dark_input; }
function set_style($style_input)//设置柱图样式 { $this->style=$style_input; }
function set_shadow($shadow_input)//设置阴影深度 { $this->shadow=$shadow_input; }
function set_space($space_input)//设置柱间距 { $this->space=$space_input; }
function set_ispercent($ispercent_input)//设置是否用百分比 { $this->ispercent=$ispercent_input; }
function set_data($data_input)//设置数据 { for ($i=0;$i<count($data_input);$i++) $this->data[$i]=$data_input[$i]; }
function preset_data()//数据处理 { if ($this->ispercent) { $total_tmp=0; for ($i=0;$i<count($this->data);$i++) $total_tmp+=$this->data[$i]; for ($i=0;$i<count($this->data);$i++) $this->result[$i]=number_format(100*$this->data[$i]/$total_tmp,1); return (0); } else { $tmp[0]=$this->data[0]; $tmp[1]=$this->data[0]; for ($i=0;$i<count($this->data);$i++) { if ($tmp[0]>$this->data[$i]) $tmp[0]=$this->data[$i]; if ($tmp[1]<$this->data[$i]) $tmp[1]=$this->data[$i]; } return ($tmp); } }
function display()//显示柱图 { switch ($this->style) { case 1:$this->style_1();break; case 2:$this->style_2();break; case 3:$this->style_3();break; case 4:$this->style_4();break; } } }
源程序如下:
<?php
//连接数据库
$sql="select * from wzdcedit";
$result=mysql_query($sql,$cn);
$record=mysql_fetch_array($result);
$onecount=$record["oneitem"];
$twocount=$record["twoitem"];
$threecount=$record["threeitem"];
$fourcount=$record["fouritem"];
$totalcount=$onecount+$twocount+$threecount+$fourcount;
$onepercent=round(($onecount*100/$totalcount));
$twopercent=round(($twocount*100/$totalcount));
$threepercent=round(($threecount*100/$totalcount));
$fourpercent=round(($fourcount*100/$totalcount));
mysql_close();
?>
<html>
<head>
<title>网上调查——岳阳红盾信息网</title>
<link rel="stylesheet" href="../css/main.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="1" topmargin="1">
<table width="400" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="282"><img src="../images/big_logo.gif" width="220" height="60"></td>
<td valign="bottom" align="center" width="118">
<div align="right"><a href="../index.php">返回首页</a></div>
</td>
</tr>
</table>
<table width="400" border="1" cellspacing="0" cellpadding="0" bordercolor="#efefef" align="center">
<tr>
<td colspan="3" height="30"><b><font color="#FF0000" size="3">网上调查</font></b><font color="#FF0000">:您认为目前红盾信息网应侧重哪一方面?</font></td>
</tr>
<tr>
<td colspan="3" height="20">
<div align="right"><font color="#FF0000">总投票人次:
<? echo $totalcount;?>
</font></div>
</td>
</tr>
<tr>
<td width="100" height="20">
<div align="center"><b>选 项</b></div>
</td>
<td width="250" height="20">
<div align="center"><b>比 例</b></div>
</td>
<td width="50" height="20">
<div align="center"><b>分 布</b></div>
</td>
</tr>
<tr>
<td width="100" height="20">
<div align="center">版面设计</div>
</td>
<td width="250" height="20">
<?echo "<table width=$onepercent.% border=1 bgcolor=\"#0099FF\">\n";
echo "<tr><td></td><td>\n";
echo "</table>\n";?>
</td>
<td width="50" height="20">
<div align="center"><font color="#FF0000">
<? echo $onecount;?>
</font></div>
</td>
</tr>
<tr>
<td width="100" height="20">
<div align="center">工商资讯</div>
</td>
<td width="250" height="20">
<? echo "<table width=$twopercent.% border=1 bgcolor=\"#660000\">\n";
echo "<tr><td></td><td>\n";
echo "</table>\n";?>
</td>
<td width="50" height="20">
<div align="center"><font color="#FF0000">
<? echo $twocount;?>
</font></div>
</td>
</tr>
<tr>
<td width="100" height="20">
<div align="center">企业诚信</div>
</td>
<td width="250" height="20">
<? echo "<table width=$threepercent.% border=1 bgcolor=\"#66FFFF\">\n";
echo "<tr><td></td><td>\n";
echo "</table>\n";?>
</td>
<td width="50" height="20">
<div align="center"><font color="#FF0000">
<? echo $threecount;?>
</font></div>
</td>
</tr>
<tr>
<td width="100" height="20">
<div align="center">地方特色</div>
</td>
<td width="250" height="20">
<? echo "<table width=$fourpercent.% border=1 bgcolor=\"#99ff00\">\n";
echo "<tr><td></td><td>\n";
echo "</table>\n";?>
</td>
<td width="50" height="20">
<div align="center"><font color="#FF0000">
<? echo $fourcount;?>
</font></div>
</td>
</tr>
</table>
<head>
<title>柱状图</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<?
/*
Written by Caocao.
http://caocao.oso.com.cn
[email protected]
*/
class bar
{
var $bar_width=15;//柱宽
var $bar_height=400;//最大柱高
var $bar_color_light="CCCCCC";//柱色
var $bar_color_dark="000000";//阴影色
var $shadow=3;//阴影深度
var $space=5;//柱间距
var $data;//数据
var $result;//结果
var $style=1;//柱图样式
var $ispercent=1;//是否用百分比
function set_width_height($bar_width_input,$bar_height_input)//设置柱宽柱高
{
$this->bar_width=$bar_width_input;
$this->bar_height=$bar_height_input;
}
function set_bar_color($bar_color_light_input,$bar_color_dark_input)//设置柱色阴影色
{
$this->bar_color_light=$bar_color_light_input;
$this->bar_color_dark=$bar_color_dark_input;
}
function set_style($style_input)//设置柱图样式
{
$this->style=$style_input;
}
function set_shadow($shadow_input)//设置阴影深度
{
$this->shadow=$shadow_input;
}
function set_space($space_input)//设置柱间距
{
$this->space=$space_input;
}
function set_ispercent($ispercent_input)//设置是否用百分比
{
$this->ispercent=$ispercent_input;
}
function set_data($data_input)//设置数据
{
for ($i=0;$i<count($data_input);$i++)
$this->data[$i]=$data_input[$i];
}
function preset_data()//数据处理
{
if ($this->ispercent)
{
$total_tmp=0;
for ($i=0;$i<count($this->data);$i++)
$total_tmp+=$this->data[$i];
for ($i=0;$i<count($this->data);$i++)
$this->result[$i]=number_format(100*$this->data[$i]/$total_tmp,1);
return (0);
}
else
{
$tmp[0]=$this->data[0];
$tmp[1]=$this->data[0];
for ($i=0;$i<count($this->data);$i++)
{
if ($tmp[0]>$this->data[$i])
$tmp[0]=$this->data[$i];
if ($tmp[1]<$this->data[$i])
$tmp[1]=$this->data[$i];
}
return ($tmp);
}
}
function style_1()
{
$tmp=$this->preset_data();
echo "<table border=0 cellspacing=0 cellpadding=".$this->space.">n";
if (count($tmp)==1)
{
for ($i=0;$i<count($this->result);$i++)
{
echo "<tr><td>".$this->result[$i]."%</td><td><table height=".$this->bar_width." width=".ceil($this->result[$i]*$this->bar_height/100)." border=0 cellspacing=0 cellpadding=0 bgcolor=".$this->bar_color_light."><tr><td></td></tr></table></td></tr>n";
}
}
else
{
for ($i=0;$i<count($this->data);$i++)
{
echo "<tr><td>".$this->data[$i]."</td><td><table height=".$this->bar_width." width=".ceil(100*($this->data[$i]-$tmp[0])/($tmp[1]-$tmp[0])+1)." border=0 cellspacing=0 cellpadding=0 bgcolor=".$this->bar_color_light."><tr><td></td></tr></table></td></tr>n";
}
}
echo "</table>n";
}
function style_2()//柱树直,无阴影
{
$tmp=$this->preset_data();
echo "<table border=0 cellspacing=0 cellpadding=".$this->space."><tr>n";
if (count($tmp)==1)
{
for ($i=0;$i<count($this->result);$i++)
{
echo "<td valign=bottom><table width=".$this->bar_width." height=".ceil($this->result[$i]*$this->bar_height/100)." border=0 cellspacing=0 cellpadding=0 bgcolor=".$this->bar_color_light."><tr><td></td></tr></table></td>n";
}
echo "</tr><tr>";
for ($i=0;$i<count($this->result);$i++)
{
echo "<td>".$this->result[$i]."%</td>";
}
}
else
{
for ($i=0;$i<count($this->data);$i++)
{
echo "<td valign=bottom><table width=".$this->bar_width." height=".ceil(100*($this->data[$i]-$tmp[0])/($tmp[1]-$tmp[0])+1)." border=0 cellspacing=0 cellpadding=0 bgcolor=".$this->bar_color_light."><tr><td></td></tr></table></td>n";
}
echo "</tr><tr>";
for ($i=0;$i<count($this->data);$i++)
{
echo "<td>".$this->data[$i]."</td>";
}
}
echo "</tr></table>n";
}
{
$tmp=$this->preset_data();
echo "<table border=0 cellspacing=0 cellpadding=".$this->space.">n";
if (count($tmp)==1)
{
for ($i=0;$i<count($this->result);$i++)
{
echo "<tr><td>".$this->result[$i]."%</td><td><table border=0 cellspacing=0 cellpadding=0><tr><td colspan=2 height=".$this->bar_width." rowspan=2 width=".ceil($this->result[$i]*$this->bar_height/100)." bgcolor=".$this->bar_color_light."></td><td width=".$this->shadow." height=".$this->shadow."></td></tr><tr><td width=".$this->shadow." height=".($this->bar_width-$this->shadow)." bgcolor=".$this->bar_color_dark."></td></tr><tr><td width=".$this->shadow." height=".$this->shadow."></td><td bgcolor=".$this->bar_color_dark." height=".$this->shadow." width=".(ceil($this->result[$i]*$this->bar_height/100)-$this->shadow)."></td><td width=".$this->shadow." height=".$this->shadow." bgcolor=".$this->bar_color_dark."></td></tr></table></td></tr>n";
}
}
else
{
for ($i=0;$i<count($this->data);$i++)
{
echo "<tr><td>".$this->data[$i]."</td><td><table border=0 cellspacing=0 cellpadding=0><tr><td colspan=2 height=".$this->bar_width." rowspan=2 width=".ceil(100*($this->data[$i]-$tmp[0])/($tmp[1]-$tmp[0])+1)." bgcolor=".$this->bar_color_light."></td><td width=".$this->shadow." height=".$this->shadow."></td></tr><tr><td width=".$this->shadow." height=".($this->bar_width-$this->shadow)." bgcolor=".$this->bar_color_dark."></td></tr><tr><td width=".$this->shadow." height=".$this->shadow."></td><td bgcolor=".$this->bar_color_dark." height=".$this->shadow." width=".(ceil(100*($this->data[$i]-$tmp[0])/($tmp[1]-$tmp[0])+1)-$this->shadow)."></td><td width=".$this->shadow." height=".$this->shadow." bgcolor=".$this->bar_color_dark."></td></tr></table></td></tr>n";
}
}
echo "</table>n";
}
function style_4()//柱竖直,有阴影
{
$tmp=$this->preset_data();
echo "<table border=0 cellspacing=0 cellpadding=".$this->space."><tr>n";
if (count($tmp)==1)
{
for ($i=0;$i<count($this->result);$i++)
{
echo "<td valign=bottom><table border=0 cellspacing=0 cellpadding=0><tr><td colspan=2 rowspan=2 width=".$this->bar_width." height=".ceil($this->result[$i]*$this->bar_height/100)." bgcolor=".$this->bar_color_light."></td><td width=".$this->shadow." height=".$this->shadow."></td></tr><tr><td width=".$this->shadow." height=".(ceil($this->result[$i]*$this->bar_height/100)-$this->shadow)." bgcolor=".$this->bar_color_dark."></td></tr><tr><td width=".$this->shadow."></td><td height=".$this->shadow." width=".($this->bar_width-$this->shadow)." bgcolor=".$this->bar_color_dark."></td><td height=".$this->shadow." bgcolor=".$this->bar_color_dark."></td></tr></table></td>n";
}
echo "</tr><tr>";
for ($i=0;$i<count($this->result);$i++)
{
echo "<td>".$this->result[$i]."%</td>";
}
}
else
{
for ($i=0;$i<count($this->data);$i++)
{
echo "<td valign=bottom><table border=0 cellspacing=0 cellpadding=0><tr><td colspan=2 rowspan=2 width=".$this->bar_width." height=".ceil(100*($this->data[$i]-$tmp[0])/($tmp[1]-$tmp[0])+1)." bgcolor=".$this->bar_color_light."></td><td width=".$this->shadow." height=".$this->shadow."></td></tr><tr><td width=".$this->shadow." height=".(ceil(100*($this->data[$i]-$tmp[0])/($tmp[1]-$tmp[0])+1)-$this->shadow)." bgcolor=".$this->bar_color_dark."></td></tr><tr><td width=".$this->shadow."></td><td height=".$this->shadow." width=".($this->bar_width-$this->shadow)." bgcolor=".$this->bar_color_dark."></td><td height=".$this->shadow." bgcolor=".$this->bar_color_dark."></td></tr></table></td>n";
}
echo "</tr><tr>";
for ($i=0;$i<count($this->data);$i++)
{
echo "<td>".$this->data[$i]."</td>";
}
}
echo "</tr></table>n";
}
function display()//显示柱图
{
switch ($this->style)
{
case 1:$this->style_1();break;
case 2:$this->style_2();break;
case 3:$this->style_3();break;
case 4:$this->style_4();break;
}
}
}
$newdata=array(30,60,55,48,30,70,28,0);
$result=new bar;
$result->set_data($newdata);
$result->set_width_height(20,800);
$result->set_space(3);
$result->set_shadow(3);
$result->set_ispercent(0);
for ($i=1;$i<5;$i++)
{
$result->set_style($i);
$result->display();
}
$result->set_ispercent(1);
for ($i=1;$i<5;$i++)
{
$result->set_style($i);
$result->display();
}
?>
</body>
</html>
<title>JS - Balkendiagramm</title>
<link rel=stylesheet href="style.css" type="text/css"><script Language="JavaScript">
//---------------------------------
// Variables:
// wid,hei - The size of the chart on axes x and y.
// x0, y0 - relative coordinate in which is deduced the chart.
// dat() - The initial data. Any quantity of elements.
// name1,name2,name3 - The names of lines in the table and charts.
// col() - Colours of elements of the diagram. We made 14, if it is necessary more - you add.
// bgCol_Pg - Background of page. Use for Netscape 6.
//---------Variables---------------
wid=200
hei=200
x0=(window.screen.width-wid*1.3-60)/2
y0=20
dat=new Array("15748","24015","11542","20455")
name1="Quarter:"
name2="Quantity:"
name3="The report:"
col =new Array("00ff00","ff0000","ffff00","0000ff","ff00ff","00ffff","000000","00cc00","cc0000","cccc00","0000cc","cc00cc","00cccc","cccccc")
bgCol_Pg="#ffffff"
//----------End Variables----------//This and others free scripts you can find on a site: artdhtml.com
//The script works both with Internet Explorer (4-6) and with Netscape (4,6).y0=y0+hei*1.2 // - correctionfunction genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, sBg, copy)
{
document.write('<LAYER ' +((sName)?'NAME="'+sName+'"':'') + ' LEFT=' + sLeft + ' TOP=' + sTop +
' WIDTH=' + sWdh + ' HEIGHT=' + sHgt + ((sBg)?' bgColor='+sBg:'')+'' + ((sVis)?' VISIBILITY='+sVis:'')+ '' +
' z-Index=0>' +((copy)?copy:"") + '</LAYER>');
}
function recharts(j,he)
{
if(ns)
{
for (i=0; i<100; i=i+1)
{
if ((i+0.1)/100>he){document.ilay1.document.layers["n"+j+"y"+i].visibility = "hide"}
else{document.ilay1.document.layers["n"+j+"y"+i].visibility = "show"}
}
}
if(ie4)
{
document.all["n"+j].style.top=0-Math.ceil(he*hei);
document.all["n"+j].style.height=Math.ceil(he*hei);
}
if(ns6)
{
document.getElementById("nn"+j).style.height=Math.ceil(hei-he*hei);
document.getElementById("n"+j).style.height=Math.ceil(he*hei);
document.getElementById("n"+j).style.top=0-Math.ceil(he*hei);
}
}function diagram()
{
d_max=0
for (j=0; j<n_dat; j++)
{
if(isNaN(document.fData["t"+(j+1)].value)){alert("Error! A field "+(j+1)+". Enter number.");document.fData["t"+(j+1)].value=0}
dat[j]=document.fData["t"+(j+1)].value*1
if(dat[j]>d_max){d_max=dat[j]}
}
for (j=0; j<n_dat; j++)
{
recharts(j,dat[j]/d_max)
}
return false;
}//-------End functions--------var ns=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0NN=(document.layers ? true:false)
n_dat=dat.length//-----Generation of table----len_max=2
for (j=0; j<n_dat; j++)
{
if(dat[j].length>len_max){len_max=dat[j].length}
}document.write('<table border=0 cellpadding=0 cellspacing=0 align=center><tr bgcolor=#CCCCCC><td align=right>'+name1+'</td>')
for (j=0; j<n_dat; j++)
{
document.write('<td align=center>'+(j+1)+'</td>')
}
document.write('<td> </td></tr><form name="fData" method="POST" action="charts.htm" onSubmit="return diagram()";><tr bgcolor=#CCCCCC><td align=right>'+name2+'</td>')
for (j=0; j<n_dat; j++)
{
document.write('<td align=center><input type=text name="t'+(j+1)+'" size='+len_max+' value='+dat[j]+'></td>')
}
document.write('<td> <input type="submit" value="Go" name="B3" > </td></tr></form></table>')document.write("<p align=center><font face=Arial size=3><b>"+name3+"</b></font></p>")//----------End table-------
if (ns){document.write("<ilayer name=ilay1>")}
else {document.write("<div style='position:relative; left:"+x0+";top:"+y0+";width:"+wid*1.3+";height:"+hei*1.3+"'>")}
if (ns)
{
genLayer("", x0-2, y0, wid*1.2, 2, "show", "#000000", "")
genLayer("", x0-2, y0-hei*1.2, 2, hei*1.2, "show", "#000000", "")
}
else
{
document.write("<div border=0 style='position:absolute; left:"+(0-2)+";top:"+(0)+";width:"+(wid*1.2)+";height:"+2+";background:#000000'><img src=1x1.gif width=1 height=1></div>")
document.write("<div border=0 style='position:absolute; left:"+(0-2)+";top:"+(0-hei*1.2)+";width:"+2+";height:"+(hei*1.2)+";background:#000000'><img src=1x1.gif width=1 height=1></div>")
}wid=wid/n_dat
for (j=0; j<n_dat; j++)
{
if (ns)
{
for (i=0; i<100; i=i+1)
{
genLayer("n"+j+"y"+i+"", x0+j*wid, y0-(i+1)*hei/100, wid, hei/100, "show", col[j], "")
}
}
if (ie4)
{
document.write("<a href=http://www.pigasus.de><img src=1x1.gif id=n"+j+" border=0 style='position:absolute; left:"+(0+j*wid)+";top:"+(0-hei)+";width:"+wid+";height:"+hei+";background:#"+col[j]+"'></a>")
}
if (ns6)
{
document.write("<div id=n"+j+" border=0 style='position:absolute; left:"+(0+j*wid)+";top:"+(0-hei)+";width:"+wid+";height:"+hei+";background:#"+col[j]+"'></div>")
document.write("<div id=nn"+j+" border=0 style='position:absolute; left:"+(0+j*wid)+";top:"+(0-hei)+";width:"+wid+";height:"+hei+";background:#"+bgCol_Pg+"'></div></a>")
}}
if (ns){document.write("</ilayer>")}
else {document.write("</div>")}tim=window.setTimeout("diagram()",1000)
</script>
</head>
</html>