A few days ago, I suddenly wanted to write something. After all, I seldom do development on my own now (mainly maintenance-oriented, and rarely develop new modules independently ), A colleague just made a data statistics trend page and wrote a data statistics trend chart according to the same requirements. Another reason is that you want to play with CSS. I don't know where to come up with the idea. I use CSS to make a picture. The following code is generated. Of course, it took me a long time to complete the debugging (around seven days, mainly to locate the problem, too messy). I still haven't figured it out yet, why is the location in cell in the table so different .!!!
(In IE, JavaScript has not been improved to comply with W3C standards. If someone wants to use it in Firefox, it should be convenient to modify JavaScript by themselves :)
Add the PHP code:D4x4green is a 4*4 pixel image used to identify the position of data in the coordinate axis.
<! 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 ();">
<?
/*
* Goal: provide a set of numbers and draw a trend chart of the data.
* 1. Obtain the number of data, the maximum value, the maximum value/number (+ 1), and the increment value of each grid in group Y.
* 2. in the HTML table object of 640xlarge, The basemap is drawn. The rows are rows + 2 and the columns are Col + 2. The extra rows are used to add the coordinate axes respectively, and the other rows are placed with data.
* 3. Locate the position of each data in the basemap.
* 4. Plot the position of each data in the grid
*/
$ Flux = ";
// $ Flux = "1, 35, 37 ";
$ Months = ", 04 ";
$ 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 ;";
// Maximum row number = table row number-1, starting from the maximum row number-1
// Table minimum number = 0
// Number of rows in the table + 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 = " ";
// 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;
}
// Set the width of the last column
Document. All. tableid. Rows (0). cells (arrayflux. Length + 1). style. pixelwidth = cellwidth;
}
// -->
</SCRIPT>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
