你需要什么？

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

可重用的背景

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

圖A

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

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

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

舉一個(gè)例子

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

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

準(zhǔn)備好直方圖

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

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

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

寬度、高度和極大值

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

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

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

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

上面的算法用到了maximum和圖形的innerWIDTH（圖形區(qū)域）這兩個(gè)數(shù)值來(lái)確保直方塊會(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類(lèi)利用它們來(lái)決定標(biāo)題和圖形區(qū)域的寬度和高度。最后，計(jì)算average數(shù)據(jù)值并添加到標(biāo)題中顯示的文本中。

創(chuàng)建直方塊

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

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

編碼

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

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

圖B

無(wú)論從那個(gè)方面來(lái)說(shuō)，index.jsp的輸出都是一個(gè)JPEG圖像。你可以把它保存到你的桌面上或者按PrintScreen鍵來(lái)抓圖。如果你需要在同一頁(yè)上顯示多幅圖形或者把圖形引入到其它內(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ù)（類(lèi)似記錄廣告點(diǎn)擊次數(shù)的情況），那么你需要在index.jsp中實(shí)現(xiàn)諸如點(diǎn)擊計(jì)數(shù)、數(shù)據(jù)庫(kù)或者文件訪問(wèn)之類(lèi)的任務(wù)，你可以在后臺(tái)處理這些任務(wù)而不需要利用緩沖頁(yè)面切換給用戶。

結(jié)論

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

最新評(píng)論