PHP写的HTML图表(数据统计趋势图)
2006-03-28 17:14
344 查看
前几天突然很想写些东西，毕竟现在很少自己做开发（主要是现在的工作以维护为主，很少独立开发新的模块），刚好有个同事在练笔做一个数据统计趋势的页面，就按着同样的要求，自己写了一个数据统计趋势图。还有一个原因是想玩玩CSS。也不知道哪里冒出来的想头，用CSS做图。这样就产生了下面的代码。当然，发费了我好久才调试成功（7天左右时间，主要是定位问题，太乱了），到现在还是没搞清楚，为什么在表格的cell里定位是这么不一样。！！！
（在ie里通过，主要是javascript 没有改进去符合 w3c的标准，如果有人要在firefox下用，自己改javascript，这个应该是方便的：）
附上PHP 的代码：其中d4x4green是一个4*4像素的图片,用来标识数据在坐标轴的位置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>chart</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
.cell{
padding-left: 0px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: none;
border-left-style: none;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
position: relative;
}
.polar_y {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
.polar_x {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
position: relative;
}
.polar_y_value {
clear: right;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
top: -8px;
background-color: #FFFFCC;
border: 1px solid #CCCCCC;
}
.polar_x_value {
clear: right;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
top:0px;
right:-8px;
}
</style>
<BODY onload="numberCells();">
<?
/*
* 目标：给出一组数，绘出数据的趋势走向图
* 1.得到数据个数，得到最大值,最大值/个数(+1) 得到Y组每格增量值
* 2.在640x480的html表格对象中，绘出底图 , 行是rows+2,列是 col+2 ，多出的一行分别用来增加坐标轴,另一行是放数据的
* 3.定位每个数据在底图中的位置
* 4.绘出每个数据在格子中的位置
*/
$flux="5,0,11,18,9,30,40,50,43,30,32,60";
//$flux="1,35,37";
$months="01,02,03,04,05,06,07,08,09,10,11,12";
$arrflux=split(",",$flux);
$arrmonths=split(",",$months);
$rows=count($arrflux);
$cols=$rows;//count($arrmonths);
$maxflux=0;
for($i=0;$i<$rows;$i++){
if ( $maxflux<intval($arrflux[$i]) ) {
$maxflux=intval($arrflux[$i]);
}
}
$fluxperrow=intval($maxflux/ $rows);
if ($maxflux % $rows >0){
$fluxperrow=$fluxperrow+1;
}
?>
<table width="640" height="480" align="center" cellspacing="0" cellpadding="0" id="tableID">
<?
echo ("<tr>");
echo("<td align=/"right/" valign=/"top/" class=/"polar_y/"><div>");
echo(" ");
echo("</div></td>");
for ($c = 0; $c <= $cols; $c++) {
echo("<td class=/"cell/"> </td>");
}
echo ("</tr>");
// draw polar_y and cell
for ($r = $rows; $r >0; $r--) {
echo ("<tr>");
echo("<td align=/"right/" valign=/"top/" class=/"polar_y/"><div class=/"polar_y_value/">");
echo($r*$fluxperrow);
echo("</div></td>");
for ($c = 0; $c <= $cols; $c++) {
echo("<td class=/"cell/"> </td>");
}
echo ("</tr>");
}
// draw polar_x
echo ("<tr>");
echo("<td align=/"right/" valign=/"top/" class=/"polar_y/"></td>");
for ($c = 0; $c < $cols; $c++) {
echo("<td class=/"polar_x/"><div class=/"polar_x_value/">".$arrmonths[$c]."</div></td>");
}
echo("<td class=/"polar_x/"> </td>");
echo ("</tr>");
?>
</table>
<span id="debug"></sapn>
<SCRIPT LANGUAGE="JavaScript">
<!--
var arrayflux=new Array(
<?
for($i=0;$i<count($arrflux);$i++)
{
echo "'$arrflux[$i]'";
if($i<>(count($arrflux)-1))
{
echo ",";
}
}
?>
);
var fluxperrow=<?=$fluxperrow?>;
var zi=0;
var sAdditional=" position: relative; float:right; right : -6px ; ";
//最大行号=表格行数-1,从最大行数-1开始定位
//表格最小号=0
//表格行数 数据行数+2
function numberCells() {
var tablerows=tableID.rows.length;
for (i=0 ;i< arrayflux.length ;i++){
zi=parseInt(arrayflux[i] / fluxperrow);
//set cell width && height
cellheight=parseInt(480/tablerows );
document.all.tableID.rows(tablerows-2-zi).cells(i+1).style.pixelHeight=cellheight;
cellwidth=parseInt(640/tableID.rows(tablerows-2-zi).cells.length );
document.all.tableID.rows(tablerows-2-zi).cells(i+1).style.pixelWidth=cellwidth;
pos=arrayflux[i] % fluxperrow;
pos=Math.round(cellheight/fluxperrow * pos)+3 - cellheight ;
mystyle=sAdditional+"bottom: "+pos+"px;";
document.all.tableID.rows(tablerows-2-zi).cells(i+1).innerHTML ="<img src=/"./d4x4green.jpg/" style=/""+mystyle+"/" />";
//style=/""+mystyle+"/"
//alert(tablerows+"-2-"+zi+"="+(tablerows-2-zi));
//document.all.debug.innerText=cellwidth+":"+cellheight + " "+document.all.tableID.rows(arrayflux.length-zi).cells(i+1).innerHTML+ " Pos= "+pos;
//break;
}
//设置最后一列的宽度
document.all.tableID.rows(0).cells(arrayflux.length+1).style.pixelWidth=cellwidth;
}
//-->
</SCRIPT>
</BODY>
</HTML>
（在ie里通过，主要是javascript 没有改进去符合 w3c的标准，如果有人要在firefox下用，自己改javascript，这个应该是方便的：）
附上PHP 的代码：其中d4x4green是一个4*4像素的图片,用来标识数据在坐标轴的位置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>chart</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
.cell{
padding-left: 0px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: none;
border-left-style: none;
border-top-color: #999;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #999;
position: relative;
}
.polar_y {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
.polar_x {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
position: relative;
}
.polar_y_value {
clear: right;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
top: -8px;
background-color: #FFFFCC;
border: 1px solid #CCCCCC;
}
.polar_x_value {
clear: right;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
top:0px;
right:-8px;
}
</style>
<BODY onload="numberCells();">
<?
/*
* 目标：给出一组数，绘出数据的趋势走向图
* 1.得到数据个数，得到最大值,最大值/个数(+1) 得到Y组每格增量值
* 2.在640x480的html表格对象中，绘出底图 , 行是rows+2,列是 col+2 ，多出的一行分别用来增加坐标轴,另一行是放数据的
* 3.定位每个数据在底图中的位置
* 4.绘出每个数据在格子中的位置
*/
$flux="5,0,11,18,9,30,40,50,43,30,32,60";
//$flux="1,35,37";
$months="01,02,03,04,05,06,07,08,09,10,11,12";
$arrflux=split(",",$flux);
$arrmonths=split(",",$months);
$rows=count($arrflux);
$cols=$rows;//count($arrmonths);
$maxflux=0;
for($i=0;$i<$rows;$i++){
if ( $maxflux<intval($arrflux[$i]) ) {
$maxflux=intval($arrflux[$i]);
}
}
$fluxperrow=intval($maxflux/ $rows);
if ($maxflux % $rows >0){
$fluxperrow=$fluxperrow+1;
}
?>
<table width="640" height="480" align="center" cellspacing="0" cellpadding="0" id="tableID">
<?
echo ("<tr>");
echo("<td align=/"right/" valign=/"top/" class=/"polar_y/"><div>");
echo(" ");
echo("</div></td>");
for ($c = 0; $c <= $cols; $c++) {
echo("<td class=/"cell/"> </td>");
}
echo ("</tr>");
// draw polar_y and cell
for ($r = $rows; $r >0; $r--) {
echo ("<tr>");
echo("<td align=/"right/" valign=/"top/" class=/"polar_y/"><div class=/"polar_y_value/">");
echo($r*$fluxperrow);
echo("</div></td>");
for ($c = 0; $c <= $cols; $c++) {
echo("<td class=/"cell/"> </td>");
}
echo ("</tr>");
}
// draw polar_x
echo ("<tr>");
echo("<td align=/"right/" valign=/"top/" class=/"polar_y/"></td>");
for ($c = 0; $c < $cols; $c++) {
echo("<td class=/"polar_x/"><div class=/"polar_x_value/">".$arrmonths[$c]."</div></td>");
}
echo("<td class=/"polar_x/"> </td>");
echo ("</tr>");
?>
</table>
<span id="debug"></sapn>
<SCRIPT LANGUAGE="JavaScript">
<!--
var arrayflux=new Array(
<?
for($i=0;$i<count($arrflux);$i++)
{
echo "'$arrflux[$i]'";
if($i<>(count($arrflux)-1))
{
echo ",";
}
}
?>
);
var fluxperrow=<?=$fluxperrow?>;
var zi=0;
var sAdditional=" position: relative; float:right; right : -6px ; ";
//最大行号=表格行数-1,从最大行数-1开始定位
//表格最小号=0
//表格行数 数据行数+2
function numberCells() {
var tablerows=tableID.rows.length;
for (i=0 ;i< arrayflux.length ;i++){
zi=parseInt(arrayflux[i] / fluxperrow);
//set cell width && height
cellheight=parseInt(480/tablerows );
document.all.tableID.rows(tablerows-2-zi).cells(i+1).style.pixelHeight=cellheight;
cellwidth=parseInt(640/tableID.rows(tablerows-2-zi).cells.length );
document.all.tableID.rows(tablerows-2-zi).cells(i+1).style.pixelWidth=cellwidth;
pos=arrayflux[i] % fluxperrow;
pos=Math.round(cellheight/fluxperrow * pos)+3 - cellheight ;
mystyle=sAdditional+"bottom: "+pos+"px;";
document.all.tableID.rows(tablerows-2-zi).cells(i+1).innerHTML ="<img src=/"./d4x4green.jpg/" style=/""+mystyle+"/" />";
//style=/""+mystyle+"/"
//alert(tablerows+"-2-"+zi+"="+(tablerows-2-zi));
//document.all.debug.innerText=cellwidth+":"+cellheight + " "+document.all.tableID.rows(arrayflux.length-zi).cells(i+1).innerHTML+ " Pos= "+pos;
//break;
}
//设置最后一列的宽度
document.all.tableID.rows(0).cells(arrayflux.length+1).style.pixelWidth=cellwidth;
}
//-->
</SCRIPT>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 统计分析基础 (一) 数据统计与图表
- 用PHP的超级变量$_GET获取HTML表单(Form) 数据
- 数据采集利器-PHP用DOM方式处理HTML之《Simple HTML DOM》
- html+css实现数据图表的展示效果
- 网络爬虫之php抓取json，xml，js，html示例分析及数据解析
- PHP+Mysql+jQuery中国地图区域数据统计实例讲解
- php统计网站/html页面浏览访问次数程序
- 数据统计图表
- PHP数据库统计时间戳按天分组输出数据
- PHP实现数据库统计时间戳按天分组输出数据的方法
- PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
- weiphp 数据统计插件
- html中的js监听付款按钮--触发ajax调用php后台--得到的json数据---交给安卓原生处理
- PHP将HTML表格的每行每列转为数组，采集表格数据
- php的CodeIgniter框架中如何过滤数据（将危险数据如html类型的数据过滤后提交到数据库）
- PHP+Mysql+jQuery实现地图区域数据统计-展示数据
- PHP如何自动识别第三方Restful API的内容，自动渲染成 json、xml、html、serialize、csv、php等数据
- php返回json数据到html前端
- PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图等
- PHP之——thinkphp3.x中数据的查询-区间查询、统计查询等等