เรามักจะเห็นรูปภาพที่อัปเดตแบบไดนามิกบนหน้าเว็บ ซึ่งที่พบบ่อยที่สุดคือแผนภูมิเส้น K ของหุ้น บทความนี้พยายามใช้ตัวอย่างง่ายๆ เพื่อแสดงวิธีเรียก JavaBean ผ่าน JSP เพื่อสร้างฮิสโตแกรมแบบไดนามิกบนหน้าเว็บ .
ความเป็นมา: ตอนที่ฉันกำลังพัฒนาโครงการสำหรับสำนักงานสถิติเมื่อเร็วๆ นี้ ฉันมีปัญหาในการสร้างภาพแบบไดนามิกบนหน้าเว็บ ฉันใช้เวลาหนึ่งวันและในที่สุดฉันก็แก้ไขมันได้ เพื่อช่วยให้ทุกคนหลีกเลี่ยงการออกนอกเส้นทางเมื่อต้องเผชิญกับ ปัญหาเดียวกันในอนาคต ตอนนี้ฉันจะเผยแพร่แนวคิดการออกแบบและซอร์สโค้ดเพื่อให้ทุกคนได้แบ่งปัน รหัสต่อไปนี้ได้รับการทดสอบเรียบร้อยแล้วบน Windows 2000 และเว็บแอปพลิเคชันเซิร์ฟเวอร์ใช้ Jrun3.0 ของ Allaire
ขั้นตอนที่ 1: สร้าง Java Bean เพื่อสร้างไฟล์ jpg
โปรแกรมต้นฉบับมีดังนี้:
//Java Bean เพื่อสร้างรูปภาพ
//ผู้เขียน: ฉุย กวนหยู
//วันที่:24-08-2544
นำเข้า java.io.*;
นำเข้า java.util.*;
นำเข้า com.sun.image.codec.jpeg.*;
นำเข้า java.awt.image.*;
นำเข้า java.awt.*;
ChartGraphics คลาสสาธารณะ {
ภาพบัฟเฟอร์;
โมฆะสาธารณะ createImage (String fileLocation) {
พยายาม {
FileOutputStream fos = FileOutputStream ใหม่ (fileLocation);
BufferedOutputStream bos = BufferedOutputStream ใหม่ (fos);
ตัวเข้ารหัส JPEGImageEncoder = JPEGCodec.createJPEGEncoder(bos);
encoder.encode (รูปภาพ);
บอส.ปิด();
} จับ (ข้อยกเว้นจ) {
System.out.println(e);
-
}
โมฆะสาธารณะกราฟิกรุ่น (int h1,int h2,int h3,int h4,int h5) {
สุดท้าย int X=10;
int imageWidth = 300; // ความกว้างของรูปภาพ int imageHeight = 300; // ความสูงของรูปภาพ int columnWidth = 30; // ความกว้างของคอลัมน์ int imageHeight = 200; // ความสูงสูงสุดของคอลัมน์
ChartGraphics chartGraphics = ChartGraphics ใหม่ ();
chartGraphics.image = ใหม่ BufferedImage (imageWidth, imageHeight, BufferedImage.TYPE_INT_RGB);
กราฟิกกราฟิก = chartGraphics.image.getGraphics();
กราฟิก setColor (สีสีขาว);
กราฟิก. fillRect (0,0, imageWidth, imageHeight);
กราฟิกsetColor(สี.สีแดง);
graphics.drawRect(X+1*คอลัมน์กว้าง, columnHeight-h1, คอลัมน์กว้าง, h1);
graphics.drawRect(X+2*ความกว้างของคอลัมน์, ความสูงคอลัมน์-h2, ความกว้างของคอลัมน์, h2);
Graphics.drawRect(X+3*คอลัมน์กว้าง, columnHeight-h3, คอลัมน์กว้าง, h3);
graphics.drawRect(X+4*ความกว้างของคอลัมน์, ความสูงคอลัมน์-h4, ความกว้างของคอลัมน์, h4);
graphics.drawRect(X+5*ความกว้างของคอลัมน์, ความสูงคอลัมน์-h5, ความกว้างของคอลัมน์, h5);
chartGraphics.createImage("D:\temp\chart.jpg");
-
-
ถูก
ใช้เพื่อสร้างอิมเมจ JPG พารามิเตอร์ fileLocation คือพาธของไฟล์
ของรูปภาพ พารามิเตอร์ h1...h5 ขั้นตอนที่ 2 สำหรับความสูงของแต่ละสี่เหลี่ยม
: สร้าง Java Bean อื่นเพื่ออ่านข้อมูลจากไฟล์ข้อความ (ความสูงของแต่ละสี่เหลี่ยม) ในแอปพลิเคชันจริง ข้อมูลจะถูกจัดเก็บไว้ใน Oracle ฐานข้อมูล
โปรแกรมต้นทางมีดังนี้:
//อ่านไฟล์ข้อความ Java Bean สำหรับข้อมูล
//ผู้เขียน: ฉุย กวนหยู
//วันที่:24-08-2544
นำเข้า java.io.*;
GetData คลาสสาธารณะ {
int heightArray[] = int ใหม่[5];
int สาธารณะ [] getHightArray () {
พยายาม {
RandomAccessFile RandomAccessFile = RandomAccessFile ใหม่ ("d:\temp\ColumnHeightArray.txt", "r");
สำหรับ (int i=0;i<5;i++)
-
heightArray[i] = Integer.parseInt(randomAccessFile.readLine());
-
-
จับ (ข้อยกเว้นจ) {
System.out.println(e);
-
กลับความสูงArray;
-
}
คำอธิบาย: getHightArray() ใช้เพื่ออ่านข้อมูลจากข้อความ แปลงประเภท String ในข้อความเป็นประเภท int และส่งกลับเป็นประเภทอาร์เรย์
ขั้นตอนที่ 3: สร้างโปรแกรมซอร์สไฟล์ JSP
ดังต่อไปนี้:
＜%@ page import="ChartGraphics" %><
＜%@ หน้านำเข้า = "GetData" %>
＜jsp:useBean id="cg" class="ChartGraphics"/>
＜jsp:useBean id="gd" class="GetData"/>
-
int height[]=ใหม่ int[5];
-
-
ความสูง=gd.getHightArray();
cg.graphicsGeneration(ความสูง[0],ความสูง[1],ความสูง[2],ความสูง[3],ความสูง[4]);
-
<html>
<ร่างกาย>
＜img src="d:tempchart.jpg"></img/img>
＜/ตัว＞
</html>
คำอธิบาย: JSP เรียก Bean (GetData..class) ก่อนเพื่ออ่านข้อมูลในไฟล์ จากนั้นเรียก Bean (ChartGraphics.class) เพื่อสร้างรูปภาพ และสุดท้ายก็แสดงรูปภาพ
สรุป: เนื่องจากข้อมูลในข้อความ (ColumnHeightArray.txt) สามารถเปลี่ยนแปลงได้ตลอดเวลา ความสูงของสี่เหลี่ยมทั้งห้าในรูปภาพที่สร้างขึ้นจึงเปลี่ยนแปลงตามไปด้วย จึงทำให้เกิดการสร้างไดนามิกของรูปภาพได้ ระบบการลงคะแนนเสียงของเว็บไซต์