首頁 > 開發者 > PHP

PHP寫的HTML圖表(資料統計趨勢圖)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前幾天突然很想寫些東西，畢竟現在很少自己做開發（主要是現在的工作以維護為主，很少獨立開發新的模組），剛好有個同事在練筆做一個資料統計趨勢的頁面，就按著同樣的要求，自己寫了一個資料統計趨勢圖。還有一個原因是想玩玩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("&nbsp;");
   echo("</div></td>");
   for ($c = 0; $c <= $cols; $c++) {
    echo("<td   class=/"cell/">&nbsp;</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/">&nbsp;</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/">&nbsp;</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>
 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
html php call php from html change html to php action html php convert php to html html form submit php html index php
相關文章
監控伺服器swap並重啟php的Shell指令碼_linux shell
PHP(5)“最長公用首碼”演算法問題
30個很棒的PHP開源CMS內容管理系統
php調用dll經驗小結
PHP匯入匯出Excel方法
PHP 擷取當前url的函數及參數

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More