一个Jsp初学者的学习过程（六）

TheUnforgiven

第六章画柱状统计图

在编码学习的过程中，我发现的问题越来越多了，有Java方面的，SQL方面的，Html方面的，JavaScript方面的等等，对这些看似细小的问题的研究使我积累了实战的经验，起码不只是纸上谈兵了。

这个时候我的领导让我做一个东西，实现局域网内部网上计算机故障报修。这其实就是一个留言板的功能，我正好之前做过练习，所以很轻松的就做好了。之后我想我也许应该做一个统计——统计一年内每个月完成的报修任务量，如果用表格显示的话太简单了，不如做一个动态生成的柱状图吧，我突然有了这个想法。

马上开始动手，先是查资料，知道了Java里和画图有关的是java.awt包，由于我构想的图只是由矩形组成，那么用到的方法也就这么几个：fillRect，drawRect，setColor，setFont，drawString。我很快发现一个问题：如何在页面显示这个图，这是个大问题，于是找例子。

在一个学过研究生Java课程的同事的帮助下知道可以这样：写一个类（Picture.class），这个类只负责画图，没有任何关于如何显示的语句，然后在一个页面文件（.htm文件就行）里<body>里写上这段代码：<applet code="Picture" height="400" width="400"></applet>，运行这个文件就可以了。但是这个方法有这两个弊端：1、它是直接从服务器端下载Picture.class，在客户端生成图片，所以客户端必须装有java环境，比如j2re等；2、现在大部分浏览器都或者迫于无奈或者被强行绑架（这里我严重鄙视一下3721和一个叫“天下搜索”的）安装了阻止小窗口、ActiveX控件的插件——就连XP的SP2也集成了这个功能——而这个功能同样对<applet>有效。

放弃第一种方法后我在网上找到了第二个例子，第二个例子让我很奇怪，代码直接写在一个.jsp文件里，打开文件显示图片，一看这个图片的属性竟然就是这个.jsp文件的名。看了一阵子代码发现不是很理解，我开始看第三个例子。

第三个例子符合我的思维：写一个bean（或者说是一个类），把一个代表路径的字符串和一些数据传给它，它根据数据画图但是不返回（从这一点来说它不能叫做bean），而是生成一个如.jpg文件并按照传进来的路径名进行保存。然后显页面通过<img src="……">显示图片。我通过这种方式实现了工作，下面是这个类的代码：

----------------------------------Picture.java------------------------------------

//该bean用于画柱状统计图

package ringz.javabeans;

import java.io.*;

import java.util.*;

import com.sun.image.codec.jpeg.*;

import java.awt.image.*;

import java.awt.*;

public class PictureBean

{

BufferedImage image;

private String fileLocation;

public void setFileLocation(String fileLocation)//fileLocation是图片的路径，如：“D:\\a\\b\\c.jpg”

{

this.fileLocation=fileLocation;

}

public void createImage(String fileLocation)

{

try

{

FileOutputStream fos = new FileOutputStream(fileLocation);

BufferedOutputStream bos = new BufferedOutputStream(fos);

JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(bos);

encoder.encode(image);

bos.close();

}

catch(Exception e)

{

e.printStackTrace();

}

public void outGraphic(String titles,String sstr,String str[],int datas[])

{

String Title=titles;

String SStr=sstr;

int imageWidth = 400;//图片的宽度 Line

int imageHeight;//不定长

int frameFirstWidth=imageWidth-10;

int frameFirstHeight=25;

int frameSecondWidth=imageWidth-10;

int frameSecondHeight;//不定长

int frameSpace=10;//两框间隔

int columnHeight=18;//柱的粗

int columnMaxWidth=frameSecondWidth-20;//柱的最大长度,也是代表数值最大的那个柱的长度

int sp=30;//柱的间隔

int num=datas.length;//数组的长度

int Datas[]=new int[num];//得到数组的数值

String name[]=new String[num];

for (int i=0;i<num;i++)

{

Datas[i]=datas[i];

name[i]=str[i];

}

//得此数组中的最大值

int max=Datas[0];

for (int j=0;j<num;j++)

{

if(Datas[j]>max)

max=Datas[j];

}

//得到代表数值的柱的各自高度，实际数值*columnMaxHeight/max

int columnWidth[]=new int[num];//不定长，柱的长度

for (int k=0;k<num;k++)

columnWidth[k]=(Datas[k]*columnMaxWidth)/max;//取整

frameSecondHeight=(sp+columnHeight)*num+10;//+10为了留出一块底边

imageHeight=frameSecondHeight+frameFirstHeight+frameSpace+10;//多加10为了画阴影

PictureBean chartGraphics = new PictureBean();

chartGraphics.image = new BufferedImage(imageWidth, imageHeight, BufferedImage.TYPE_INT_RGB);

Graphics g = chartGraphics.image.getGraphics();

g.setColor(Color.white);

g.fillRect(0,0,imageWidth,imageHeight);//用白色涂整个图

Color frameFirstColor = new Color(20,50,100);

Color columnColor = new Color(153,19,19);

Color shadowColor = new Color(200,200,200);

g.setColor(shadowColor);

g.fillRect(0+7,0+7,frameFirstWidth,frameFirstHeight);//阴影在原框基础上移7

g.setColor(Color.white);

g.drawRect(0,0,frameFirstWidth,frameFirstHeight);//画第一个框

g.setColor(frameFirstColor);

g.fillRect(0+1,0+1,frameFirstWidth-1,frameFirstHeight-1);

g.setFont(new Font("仿体", 0 , 14));

g.setColor(Color.white);

g.drawString(Title,10,18);//写字

g.drawString(SStr,300,18);

int frameSecondY=1+frameFirstHeight+frameSpace;

g.setColor(shadowColor);

g.fillRect(0+7,frameSecondY+7,frameSecondWidth,frameSecondHeight);//阴影在原框基础上移7

g.setColor(Color.black);

g.drawRect(0,frameSecondY,frameSecondWidth,frameSecondHeight);//画第二个框

g.setColor(Color.yellow);

g.fillRect(0+1,frameSecondY+1,frameSecondWidth-1,frameSecondHeight-1);//填充第二个框

for(int l=0;l<num;l++)

{

g.setColor(Color.black);

int textY=frameSecondY+20+(sp+columnHeight)*l;

g.drawString(name[l]+"("+datas[l]+")",0+10,textY);//写文字

if (columnWidth[l]!=0)

{

g.setColor(columnColor);

g.drawRect(10,textY+5,columnWidth[l],columnHeight);//画柱的外框//框的上边离文字的底边为5

g.fillRect(10+2,textY+5+2,columnWidth[l]-3,columnHeight-3);//画柱

}

chartGraphics.createImage(fileLocation);

}

--------------------------------------------------------------------------------

但是接下来出现了一个让我难以忍受的事：自做聪明的浏览器缓存使得页面无法在短时间内更新图片——输入2004，显示了2004的图片，马上再输入2005，可是显示的仍然是2004的图片，但这时硬盘目录下的图片已经是2005的图片了，一般来说两次操作时间间隔大约少于3秒，则总是显示缓存里的那张图。这个问题困扰我很长时间，问了很多人试了很多方法都没有解决了。

很显然上面提到的第二个方法不存在此问题，我决定采用这种方法，所以我不得不回头研究它的代码，之后我发现这几句代码是显示图片的关键，而最下面的三句是和显示图有关的：

---------------------------------------------------------

response.setContentType("image/jpeg");

BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);

Graphics2D biContext = bi.createGraphics();

……

OutputStream output = response.getOutputStream();

JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);

encoder.encode(bi);

---------------------------------------------------------

我手头仅有一本电子版的《java2参考大全》，而令我苦恼的是在里边我竟然找不到BufferedImage、Graphics2D、JPEGImageEncoder这些字样；另外，上一个例子里是Graphics，它和Graphics2D有什么差别呢？这也让我很困惑。但是我终于决定要试一试，把两个例子综合一下，最终得到了下面这个worklord.jsp文件：

-----------------------------------worklord.jsp----------------------------------

<%@ include file="include.inc"%>

<%@ page contentType="text/html;charset=gb2312"%>

<%@ page import="java.io.OutputStream" %>

<%@ page import="java.util.*"%>

<%@ page import="java.awt.image.BufferedImage" %>

<%@ page import="java.awt.*" %>

<%@ page import="com.sun.image.codec.jpeg.*" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>工作量统计</title>

<!--

body {

margin-left: 10%;

margin-right: 10%;

}

.style2 {font-size: 24px}

-->

</style></head>

<body>

//得到当前的年

java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy");

java.util.Date currentTime_1 = new java.util.Date();//得到当前系统时间

String yearNow = formatter.format(currentTime_1);

String year=null;

try

{

year=request.getParameter("select");

}

catch(Exception e){}

if (year==null)

year=yearNow;

//String y=Integer.toString(year);

int sum=0;

String mon[]=new String[12];

mon[0]=year+"-01";

mon[1]=year+"-02";

mon[2]=year+"-03";

mon[3]=year+"-04";

mon[4]=year+"-05";

mon[5]=year+"-06";

mon[6]=year+"-07";

mon[7]=year+"-08";

mon[8]=year+"-09";

mon[9]=year+"-10";

mon[10]=year+"-11";

mon[11]=year+"-12";

int Datas[]=new int[12];

Connection con = null;

Statement stmt = null;

ResultSet rs = null;

try

{

Class.forName(CLASSFORNAME);//载入驱动程式类别

con=DriverManager.getConnection(SERVANDDB);//建立数据库连接

stmt=con.createStatement();

String sql="select count(*) from record where com_time like '"+year+"%"+"'";

rs=stmt.executeQuery(sql);

if (rs.next())

sum=rs.getInt("count(*)");

for (int i=0;i<12;i++)

{

sql="select count(*) from record where com_time like '"+mon[i]+"%"+"'";

rs=stmt.executeQuery(sql);

if (rs.next())

Datas[i]=rs.getInt("count(*)");

else

Datas[i]=0;

}

rs.close();

stmt.close();

con.close();

}

catch(Exception e)

{

out.print(e);

}

if (sum!=0)

{

String Title=year+"年度工作量统计图";

String SStr="总和："+sum;

String name[]={"一月份","二月份","三月份","四月份","五月份","六月份","七月份","八月份","九月份","十月份","十一月份","十二月份"};

int num=Datas.length;//数组的长度

//得此数组中的最大值

int max=Datas[0];

for (int j=0;j<num;j++)

{

if(Datas[j]>max)

max=Datas[j];

}

int imageWidth = 400;//图片的宽度 Line

int imageHeight;//不定长

int frameFirstWidth=imageWidth-10;

int frameFirstHeight=25;

int frameSecondWidth=imageWidth-10;

int frameSecondHeight;//不定长

int frameSpace=10;//两框间隔

int columnHeight=18;//柱的粗

int columnMaxWidth=frameSecondWidth-20;//柱的最大长度,也是代表数值最大的那个柱的长度

int sp=30;//柱的间隔

//得到代表数值的柱的各自高度，实际数值*columnMaxHeight/max

int columnWidth[]=new int[num];//不定长，柱的长度

for (int k=0;k<num;k++)

columnWidth[k]=(Datas[k]*columnMaxWidth)/max;//取整

frameSecondHeight=(sp+columnHeight)*num+10;//+10为了留出一块底边

imageHeight=frameSecondHeight+frameFirstHeight+frameSpace+10;//多加10为了画阴影

//开始画图

response.setContentType("image/jpeg");

BufferedImage image = new BufferedImage(imageWidth,imageHeight,BufferedImage.TYPE_INT_RGB);

Graphics g = image.createGraphics();

g.setColor(Color.white);

g.fillRect(0,0,imageWidth,imageHeight);//用白色涂整个图

Color frameFirstColor = new Color(20,50,100);

Color columnColor = new Color(153,19,19);

Color shadowColor = new Color(200,200,200);

g.setColor(shadowColor);

g.fillRect(0+7,0+7,frameFirstWidth,frameFirstHeight);//阴影在原框基础上移7

g.setColor(Color.white);

g.drawRect(0,0,frameFirstWidth,frameFirstHeight);//画第一个框

g.setColor(frameFirstColor);

g.fillRect(0+1,0+1,frameFirstWidth-1,frameFirstHeight-1);

g.setFont(new Font("仿体", 0 , 14));

g.setColor(Color.white);

g.drawString(Title,10,18);//写字

g.drawString(SStr,300,18);

int frameSecondY=1+frameFirstHeight+frameSpace;

g.setColor(shadowColor);

g.fillRect(0+7,frameSecondY+7,frameSecondWidth,frameSecondHeight);//阴影在原框基础上移7

g.setColor(Color.black);

g.drawRect(0,frameSecondY,frameSecondWidth,frameSecondHeight);//画第二个框

g.setColor(Color.yellow);

g.fillRect(0+1,frameSecondY+1,frameSecondWidth-1,frameSecondHeight-1);//填充第二个框

for(int l=0;l<num;l++)

{

g.setColor(Color.black);

int textY=frameSecondY+20+(sp+columnHeight)*l;

g.drawString(name[l]+"("+Datas[l]+")",0+10,textY);//写文字

if (columnWidth[l]!=0)

{

g.setColor(columnColor);

g.drawRect(10,textY+5,columnWidth[l],columnHeight);//画柱的外框//框的上边离文字的底边为5

g.fillRect(10+2,textY+5+2,columnWidth[l]-3,columnHeight-3);//画柱

}

try

{

//输出图

OutputStream output = response.getOutputStream();

JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);

encoder.encode(image);

output.close();

}

catch(Exception e)

{

e.printStackTrace();

}

}//if

else

{%>

<tr>

</td>

</tr>

</table>

}

</body>

</html>

----------------------------------------------------------------------------------

现在任务是完成了，其中的最关键的部分代码是实现什么功能的也大概知道了，可是还是没有掌握其中的知识，不能不说是遗憾。

另外，worklord.jsp这样的页面很特殊，就是因为这部分代码引起的：

OutputStream output = response.getOutputStream();

JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);

encoder.encode(image);

这导致了这个页面没法再干别的了，也就是说，假如你要在<body>里干点别的，像写几个字，放一个<form>什么的，页面显示不出来。

本章最后，感谢那两个例子的作者，而且图的风格都是抄袭第二个例子那位仁兄的：），但是没有记住你们的名字很遗憾。