我們常常要在網頁看到一些動態更新的圖片,最常見的莫過於股票的K線圖，本文試圖透過一個簡單的實例，向大家展示如何透過JSP 呼叫JavaBean在網頁上動態產生柱狀圖。
背景：本人最近在為某統計局開發專案時,涉及到在網頁上動態生成圖片的問題，費了一天的時間,終於搞定,為幫助大家在以後遇到同樣的問題時不走彎路，現將設計想法及原始碼公佈出來，與大家共勉。以下程式碼在Windows2000成功測試通過，Web應用程式伺服器採用Allaire公司的Jrun3.0。
第一步：建立一個Java Bean用來產生jpg檔案
來源程式如下：
//產生圖片的Java Bean
//作者:崔冠宇
//日期:2001-08-24
import java.io.*;
import java.util.*;
import com.sun.image.codec.jpeg.*;
import java.awt.image.*;
import java.awt.*;
public class ChartGraphics {
BufferedImage image;
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) {
System.out.println(e);
}
}
public void graphicsGeneration(int h1,int h2,int h3,int h4,int h5) {
final int X=10;
int imageWidth = 300;//圖片的寬度int imageHeight = 300;//圖片的高度int columnWidth=30;//柱的寬度int columnHeight=200;//柱的最大高度
ChartGraphics chartGraphics = new ChartGraphics();
chartGraphics.image = new BufferedImage(imageWidth, imageHeight, BufferedImage.TYPE_INT_RGB);
Graphics graphics = chartGraphics.image.getGraphics();
graphics.setColor(Color.white);
graphics.fillRect(0,0,imageWidth,imageHeight);
graphics.setColor(Color.red);
graphics.drawRect(X+1*columnWidth, columnHeight-h1, columnWidth, h1);
graphics.drawRect(X+2*columnWidth, columnHeight-h2, columnWidth, h2);
graphics.drawRect(X+3*columnWidth, columnHeight-h3, columnWidth, h3);
graphics.drawRect(X+4*columnWidth, columnHeight-h4, columnWidth, h4);
graphics.drawRect(X+5*columnWidth, columnHeight-h5, columnWidth, h5);
chartGraphics.createImage("D:\temp\chart.jpg");
}
}
解釋：createImage(String fileLocation)方法用來建立JPG圖片,參數fileLocation為檔案路徑
graphicsGeneration(int h1,int h2,int h3,int h4,int h5)方法來畫出圖片的內容,參數h1…h5為每一個長方形的高度
第二步：創建另一個Java Bean從文本文件中讀取數據(每一個長方形的高度)，在實際應用中數據存儲在Oracle數據庫中
源程序如下:
//讀取Text文件中資料的Java Bean
//作者:崔冠宇
//日期:2001-08-24
import java.io.*;
public class GetData {
int heightArray[] = new int[5];
public int[] getHightArray() {
try {
RandomAccessFile randomAccessFile = new RandomAccessFile ("d:\temp\ColumnHeightArray.txt","r");
for (int i=0;i＜5;i++)
{
heightArray[i] = Integer.parseInt(randomAccessFile.readLine());
}
}
catch(Exception e) {
System.out.println(e);
}
return heightArray;
}
}
解釋： getHightArray()用於從文字中讀取資料,將文字中的String類型轉換為int類型，並以陣列類型傳回。
第三步：建立JSP檔案
原始程式如下：
＜%@ page import="ChartGraphics" %＞
＜%@ page import="GetData" %＞
＜jsp:useBean id="cg" class="ChartGraphics"/＞
＜jsp:useBean id="gd" class="GetData"/＞
＜%!
int height[]=new int[5];
%＞
＜%
height=gd.getHightArray();
cg.graphicsGeneration(height[0],height[1],height[2],height[3],height[4]);
%＞
＜html＞
＜body＞
＜img src="d:tempchart.jpg"＞＜/img＞
＜/body＞
＜/html＞
解釋:JSP先呼叫Bean (GetData..class)讀取檔案中的數據，再呼叫Bean(ChartGraphics.class)產生圖片,最後顯示圖片。
結論：由於文字(ColumnHeightArray.txt)中的資料可以隨時變化，因此生成的圖片中的5個長方形的高度是隨之變化的，從而實現了圖片的動態生成.該設計思想還可以用於製作網站的投票系統。