前几天突然很想写些东西,毕竟现在很少自己做开发(主要是现在的工作以维护为主,很少独立开发新的模块),刚好有个同事在练笔做一个数据统计趋势的页面,就按着同样的要求,自己写了一个数据统计趋势图。还有一个原因是想玩玩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;