你需要什么？

為了開始運(yùn)行本文所給出的例子，你需要JDK 1.2或者它的更高版本（http://java.）。你還需要一個(gè)支持JSP的Web服務(wù)器。我在Tomcat上測試該例子，我用com.sun.image.codec.jpeg 類（在Sun Java 2 SDK中發(fā)布）進(jìn)行圖形數(shù)據(jù)的編碼。

可重用的背景

既然你希望擁有可重用的背景，你應(yīng)該創(chuàng)建一個(gè)Java類來管理布局，包括標(biāo)題區(qū)和外部邊界。如圖A所示。

圖A

正如你所看到的那樣，我在標(biāo)題區(qū)和外部邊界上都進(jìn)行了陰影處理。標(biāo)題有一個(gè)白色的、一個(gè)象素寬的邊界，圖形區(qū)有一個(gè)細(xì)的黑色邊界。這些邊界增加了陰影的清晰度。

邊界很容易產(chǎn)生。用Graphics2D對(duì)象的fill()方法來填充一個(gè)藍(lán)色的標(biāo)題矩形，然后用draw()方法用其它顏色畫出邊界。

產(chǎn)生陰影效果也很簡單。首先，用fill()方法畫出一個(gè)陰影。然后，在偏移七個(gè)象素的地方畫出標(biāo)題。這個(gè)偏移產(chǎn)生了三維的效果，這樣就得到了陰影效果。

舉一個(gè)例子

假設(shè)有一家公司銷售農(nóng)產(chǎn)品，它需要一個(gè)直方圖來顯示銷售額。在實(shí)際應(yīng)用場合下，我們需要從一個(gè)數(shù)據(jù)庫或者XML文件中獲取這些數(shù)據(jù)，但是為了簡單起見，我們假設(shè)銷售額數(shù)據(jù)保存在下面的兩個(gè)數(shù)組中：
String datanames[] = {"蘋果", "桔子", "桃子", "檸檬", "柚子"};
int datavalues[] = {11, 62, 33, 102, 50};

第一個(gè)數(shù)組保存該公司出售的各種農(nóng)產(chǎn)品的項(xiàng)目。第二個(gè)數(shù)組為對(duì)應(yīng)各農(nóng)產(chǎn)品的銷售額。

準(zhǔn)備好直方圖

直方圖將以JPEG格式顯示和保存，所以我們需要正確設(shè)置MIME，即內(nèi)容類型。瀏覽器利用MIME類型來決定如何做出反應(yīng)。下面的代碼用以設(shè)置MIME類型：
response.setContentType("image/jpeg");

接下來，我們需要一個(gè)表示該圖像的對(duì)象。Java 2D API支持BufferedImage類，它提供了一種在內(nèi)存中保存和管理象素?cái)?shù)據(jù)的方法。我們希望圖形是彩色的，所以使用了TYPE_INT_RGB圖形類型。WIDTH和HEIGHT這兩個(gè)整形數(shù)據(jù)用來以象素為單位指定該圖像的寬度和高度：
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);

現(xiàn)在我們有個(gè)一個(gè)BufferedImage對(duì)象，我們可以通過調(diào)用該對(duì)象的createGraphics()方法來設(shè)置Graphics2D的內(nèi)容：
Graphics2D biContext = bi.createGraphics();

寬度、高度和極大值

創(chuàng)建該圖的程序員需要根據(jù)該圖形的重要程度和頁面的整體布局來設(shè)置WIDTH參數(shù)。圖形元素根據(jù)圖形寬度的改變自動(dòng)調(diào)整自身的大小。

標(biāo)題的寬度和邊界區(qū)域，以及圖形的最長直方塊需要根據(jù)WIDTH參數(shù)進(jìn)行計(jì)算。這樣做的目的是為了確保所有的圖形元素都沒有超過圖形的寬度而越過圖形的右邊界。

需要顯示的數(shù)據(jù)條目數(shù)決定了圖形的HEIGHT參數(shù)。如果有新的元素添加到datavalues[]和datanames[]數(shù)組，那么圖形的高度就應(yīng)該對(duì)應(yīng)增長以適應(yīng)所需顯示的區(qū)域大小。

maximum參數(shù)用于最長直方塊。然后，其它直方塊的寬度按照相對(duì)于maximum的量進(jìn)行計(jì)算：
int barWidth = (innerWIDTH * currentValue) / maximum;

上面的算法用到了maximum和圖形的innerWIDTH（圖形區(qū)域）這兩個(gè)數(shù)值來確保直方塊會(huì)隨著WIDTH數(shù)值的改變而自動(dòng)伸縮。

顯示圖形背景

為了顯示該圖形，我們需要?jiǎng)?chuàng)建一個(gè)背景圖像，然后添加圖形數(shù)據(jù)。首先，創(chuàng)建一個(gè)graphBG對(duì)象并調(diào)用它的draw()方法：
graphBG gr = new graphBG();
gr.draw(biContext, WIDTH, HEIGHT, "Farm Produce", "Overall Average: " + average);

draw()方法的參數(shù)包括圖形內(nèi)容、biContext、WIDTH和HEIGHT，graphBG類利用它們來決定標(biāo)題和圖形區(qū)域的寬度和高度。最后，計(jì)算average數(shù)據(jù)值并添加到標(biāo)題中顯示的文本中。

創(chuàng)建直方塊

每個(gè)直方塊的縱坐標(biāo)（y軸）位置按照如下公式計(jì)算：y_pos = i * displayHeight + headerOffset。其中displayHeight等于直方塊上文本的高度加上直方塊的高度，headerOffset表示從圖形頂端開始的垂直距離，包括標(biāo)題區(qū)域以及陰影的高度。

我用了前面創(chuàng)建標(biāo)題邊界的技術(shù)創(chuàng)建了這些直方塊以及它們的邊界。我把直方塊邊界的寬度和高度分別減去一個(gè)象素，這樣每個(gè)直方塊看起來都有一個(gè)紅色的邊界，并通過在白色背景上畫上內(nèi)邊界使得減切效果的產(chǎn)生變得簡單起來。

編碼

我們已經(jīng)在內(nèi)存中建立好了這幅圖片，現(xiàn)在我們對(duì)它進(jìn)行編碼并把它顯示給用戶。我們不能用默認(rèn)得JSP輸出流來處理JPEG，所以我們需要利用response.getOutputStream()從響應(yīng)對(duì)象中獲取流。我們可以用輸出流來創(chuàng)建一個(gè)JPEGImageEncoder對(duì)象并調(diào)用它的encode()，傳遞我們在前面創(chuàng)建的BufferedImage對(duì)象：
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);
encoder.encode(bi);

產(chǎn)生的圖象相對(duì)較小，只占用了13.7千字節(jié)的容量。圖B給出了最終的效果：

圖B

無論從那個(gè)方面來說，index.jsp的輸出都是一個(gè)JPEG圖像。你可以把它保存到你的桌面上或者按PrintScreen鍵來抓圖。如果你需要在同一頁上顯示多幅圖形或者把圖形引入到其它內(nèi)容中，你可以使用HTML的img標(biāo)記（<img src = ”index.jsp”>），然后，當(dāng)需要時(shí)放置該圖，如利用一個(gè)表格。

也許最老的用于動(dòng)態(tài)產(chǎn)生圖形的Internet技術(shù)之一可以實(shí)現(xiàn)處了顯示一個(gè)圖像之外的其它任務(wù)。設(shè)想你需要記錄這副圖的瀏覽人數(shù)（類似記錄廣告點(diǎn)擊次數(shù)的情況），那么你需要在index.jsp中實(shí)現(xiàn)諸如點(diǎn)擊計(jì)數(shù)、數(shù)據(jù)庫或者文件訪問之類的任務(wù)，你可以在后臺(tái)處理這些任務(wù)而不需要利用緩沖頁面切換給用戶。

結(jié)論

我們在本文之中檢驗(yàn)了一種產(chǎn)生整齊、看上去很舒服的直方圖。我們巧妙的處理了圖形尺寸的改變以及編碼為JPEG格式，并且討論了通過修改HTML代碼的方式把最終產(chǎn)生的圖片放置在頁面的不同位置上。