有一個技術可以在Java Server Pages（JSP）中產生整齊、精細的直方圖，它可以用來作為可重用的背景。為了達到可重用性的目的，你需要使得圖形的尺寸可以調整，你還應該管理直方塊以免它們越過圖形區(qū)域的邊界。然后，你還需要把圖形數據編碼為一種可用的圖形格式。我們將利用這個代碼例子介紹本技巧。

你需要什么？

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

可重用的背景

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

圖A

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

邊界很容易產生。用Graphics2D對象的fill()方法來填充一個藍色的標題矩形，然后用draw()方法用其它顏色畫出邊界。

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

舉一個例子

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

第一個數組保存該公司出售的各種農產品的項目。第二個數組為對應各農產品的銷售額。

準備好直方圖

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

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

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

寬度、高度和極大值

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

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

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

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

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

顯示圖形背景

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

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

 

創(chuàng)建直方塊

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

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

編碼

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

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

圖B

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

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

結論

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