当前页面: 开发资料首页 → JSP 专题 → 一个Jsp初学者的学习过程（六）

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

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

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

TheUnforgiven

第六章画柱状统计图

在编码学习的过程中，我发现的问题越来越多了，有Java方面的，SQL方面的，Html方面的，JavaScript方面的等等，对这些看似细小的问题的研究使我积累了实战的经验，起码不只是纸上谈兵了。
这个时候我的领导让我做一个东西，实现局域网内部网上计算机故障报修。这其实就是一个留言板的功能，我正好之前做过练习，所以很轻松的就做好了。之后我想我也许应该做一个统计——统计一年内每个月完成的报修任务量，如果用表格显示的话太简单了，不如做一个动态生成的柱状图吧，我突然有了这个想法。
马上开始动手，先是查资料，知道了Java里和画图有关的是java.awt包，由于我构想的图只是由矩形组成，那么用到的方法也就这么几个：fillRect，drawRect，setColor，setFont，drawString。我很快发现一个问题：如何在页面显示这个图，这是个大问题，于是找例子。
在一个学过研究生Java课程的同事的帮助下知道可以这样：写一个类（Picture.class），这个类只负责画图，没有任何关于如何显示的语句，然后在一个页面文件（.htm文件就行）里<body>里写上这段代码：，运行这个文件就可以了。但是这个方法有这两个弊端：1、它是直接从服务器端下载Picture.class，在客户端生成图片，所以客户端必须装有java环境，比如j2re等；2、现在大部分浏览器都或者迫于无奈或者被强行绑架（这里我严重鄙视一下3721和一个叫“天下搜索”的）安装了阻止小窗口、ActiveX控件的插件——就连XP的SP2也集成了这个功能——而这个功能同样对有效。
放弃第一种方法后我在网上找到了第二个例子，第二个例子让我很奇怪，代码直接写在一个.jsp文件里，打开文件显示图片，一看这个图片的属性竟然就是这个.jsp文件的名。看了一阵子代码发现不是很理解，我开始看第三个例子。
第三个例子符合我的思维：写一个bean（或者说是一个类），把一个代表路径的字符串和一些数据传给它，它根据数据画图但是不返回（从这一点来说它不能叫做bean），而是生成一个如.jpg文件并按照传进来的路径名进行保存。然后显页面通过显示图片。我通过这种方式实现了工作，下面是这个类的代码：
----------------------------------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 {
Datas[i]=datas[i];
name[i]=str[i];
}

//得此数组中的最大值
int max=Datas[0];
for (int j=0;j {
if(Datas[j]>max)
max=Datas[j];
}

//得到代表数值的柱的各自高度，实际数值*columnMaxHeight/max
int columnWidth[]=new int[num];//不定长，柱的长度
for (int k=0;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 {
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.*" %>
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

工作量统计