ผู้เขียน: BUILDER.COM
JSP มีเครื่องมือที่เรียบง่ายและใช้งานได้จริงมากมาย รวมถึงการอ่านข้อมูลจากฐานข้อมูล การส่งข้อมูล และความสามารถในการแสดงผลลัพธ์เป็นแผนภูมิวงกลม ตอนนี้เรามาดูวิธีการที่เรียบง่ายแต่ใช้งานได้จริงนี้กัน
สิ่งที่คุณต้องการ
เพื่อรันตัวอย่างที่เกี่ยวข้องกับบทความนี้อย่างถูกต้อง คุณต้องมี JDK 1.2 หรือสูงกว่า ระบบจัดการฐานข้อมูลเชิงสัมพันธ์ และเซิร์ฟเวอร์เครือข่าย JSP ฉันดีบั๊กตัวอย่างเหล่านี้ใน Tomcat และฉันยังใช้ com.sun.image.codec.jpegclasses ที่เผยแพร่โดย Sun Java 2 SDK ด้วย
การออกแบบฐานข้อมูล สมมติว่าคุณทำงานให้กับบริษัทที่ขายผลไม้สด ผลไม้ที่บริษัทขาย ได้แก่ แอปเปิ้ล ส้ม และองุ่น ตอนนี้เจ้านายของคุณต้องการใช้กราฟรูปวงกลมเพื่อแสดงปริมาณการขายรวมของผลไม้แต่ละประเภท กราฟรูปวงกลมสามารถทำให้ยอดขายของผลิตภัณฑ์แต่ละอย่างชัดเจนในทันที และหัวหน้าสามารถเข้าใจธุรกรรมผลิตภัณฑ์ของบริษัทได้อย่างรวดเร็ว .
ตาราง A ใช้รายการฐานข้อมูลสองรายการจากบทความนี้ รายการแรก (ผลิตภัณฑ์) ประกอบด้วยชื่อผลิตภัณฑ์ทั้งหมดที่ขาย รายการที่สอง (ยอดขาย) ประกอบด้วยปริมาณการขายที่สอดคล้องกับผลิตภัณฑ์แต่ละรายการ
รายการผลิตภัณฑ์ประกอบด้วยสองฟิลด์: productID และชื่อผลิตภัณฑ์ รายการการขายประกอบด้วย saleID, productID และจำนวนเงินทั้งหมด รหัสผลิตภัณฑ์ในรายการการขายให้การเชื่อมโยงระหว่างสองรายการ ผลรวมในรายการการขายประกอบด้วยจำนวนเงินสดสำหรับการขายแต่ละรายการเป็นตัวเลขทศนิยม
เมธอด getProducts() ในตาราง B เชื่อมต่อสองฐานข้อมูลและบันทึกชื่อผลิตภัณฑ์ทั้งหมดในอาร์เรย์ ฉันตั้งกฎฐานข้อมูลต่อไปนี้:
ProductID เป็นชื่อที่ไม่ซ้ำใครที่สุดในรายการผลิตภัณฑ์ และเป็น ที่สำคัญที่สุดเช่นกัน
ProductID มีค่าเป็น 0 สำหรับระเบียนแรก
เรกคอร์ดต่อเนื่องกันที่ตามมาทั้งหมดเป็นแบบสะสม ดังนั้น productID ของเรกคอร์ดที่สองคือ 1, productID ของเรกคอร์ดที่สามคือ 2 และต่อๆ ไป
กฎฐานข้อมูลเหล่านี้อนุญาตให้จัดเก็บข้อมูลไว้ในอาร์เรย์ผลิตภัณฑ์ ดังที่แสดงด้านล่าง:
arr[rs.getInt("productID")] = rs.getString("productname");
ระบบการจัดการฐานข้อมูลบางระบบอนุญาตให้จัดเก็บข้อมูลอัตโนมัติตามค่าเริ่มต้น การสะสมหรือการเรียงลำดับอัตโนมัติ เมื่อคุณกำลังออกแบบฐานข้อมูล ก่อนอื่นต้องแน่ใจว่าได้ค้นหากฎเกณฑ์ที่ระบบการจัดการฐานข้อมูลของคุณปฏิบัติตาม เช่น การสะสมอัตโนมัติ การเรียงลำดับอัตโนมัติ ฯลฯ
รับปริมาณการขายรวม
ในกรณีส่วนใหญ่ รายการขายจะมีบันทึกจำนวนมาก ดังนั้นการเข้าถึงฐานข้อมูลอย่างรวดเร็วและมีประสิทธิภาพจึงมีความสำคัญมาก ตอนนี้เราแค่ต้องเข้าถึงยอดขายรวมของแต่ละผลิตภัณฑ์ในฐานข้อมูล
เมธอด getSales() ในตาราง C เชื่อมต่อกับฐานข้อมูลและส่งกลับอาร์เรย์ที่มียอดขายรวมของแต่ละผลิตภัณฑ์ เมื่อ getSales() สำรวจข้อมูลทั้งหมด จะจัดเก็บเฉพาะปริมาณการขายใหม่ของแต่ละผลิตภัณฑ์:
int product = rs.getInt("productID");
arr[ผลิตภัณฑ์] += rs.getFloat("จำนวน");
แต่ละผลิตภัณฑ์บนแผนภูมิวงกลมควรแสดงเป็นสีที่ต่างกัน เพื่อให้บรรลุวัตถุประสงค์นี้ เราสร้างวัตถุ pieColor (ดังแสดงในตาราง D) ออบเจ็กต์นี้ประกอบด้วยอาร์เรย์ของสีที่เกี่ยวข้อง:
Color pieColorArray[] = {new Color(210,60,60), new Color(60,210, 60 )...}
คลาส pieColor กำหนดเมธอด setNewColor() ซึ่งสามารถเพิ่ม curPieColor และดัชนีได้ ในขณะเดียวกันก็สามารถตรวจสอบได้ว่าดัชนีไม่เกินช่วงขอบเขต นั่นคือเมธอดที่ใช้คือ: ถ้า curPieColor มีขนาดใหญ่เกินไป จะมีการกำหนดค่าเป็น 0
มีประสิทธิภาพมากขึ้น setNewColor() วนซ้ำแต่ละสีและรันโค้ดต่อไปนี้กับสีแรก:
curPieColor++;
ถ้า (curPieColor >= pieColorArray.length)
{curPieColor = 0;}
RenderingHints และคลาสการลดรอยหยัก
คลาส java.awt.RenderingHints กำหนดวิธีการมากมายในการแสดงกราฟิกสองมิติ รวมถึงวิธี alpha_interpolation, dithering และ antialiasing RenderingHints ช่วยกำหนดวิธีแสดงกราฟิกและวิธีประมวลผลกราฟิกได้ดีที่สุด
เพื่อให้แสดงผลได้อย่างราบรื่น คุณสามารถใช้วิธีลดรอยหยักเพื่อประมวลผลกราฟิกวงกลมได้ การลดรอยหยักเป็นวิธีการปรับกราฟิกให้เรียบ อัลกอริธึมจะเลือกค่าสีของพิกเซลพิเศษและแทนที่พิกเซลที่ตัดกัน ซึ่งจะทำให้จุดตัดของเส้นเรียบขึ้น
รูปที่ A แสดงผลของวิธีการลดรอยหยัก จะเห็นได้ว่าจุดตัดของเส้นกราฟวงกลมโดยใช้วิธีลดรอยหยักจะราบรื่นมาก
รูปที่ A
ในเวลาเดียวกัน คุณยังสามารถสร้างอ็อบเจ็กต์ RenderingHints และส่งต่อไปยังเมธอด Graphics2D setRenderingHints() ดังที่แสดงด้านล่าง:
RenderingHints renderHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHints(renderHints);
สร้างเส้นขอบที่ปรับได้
รูปร่างวงกลมในรูป A มีเส้นขอบ ฉันจะเปลี่ยนขนาดของเส้นขอบได้อย่างไร ขั้นแรกคุณสามารถกำหนด int border = 10 จากนั้นคำนวณขนาดของพื้นที่ภายในเส้นขอบเพื่อให้ได้:
Ellipse2D.Double elb = new Ellipse2D.Double(x_pie - border/2, y_pie - border/2, pieWidth + border, pieHeight + border);
x_pie ค่าของ y_pie แสดงถึงมุมซ้ายบนของสี่เหลี่ยมจัตุรัสที่อยู่รอบๆ รูปร่างพาย เราได้จุดศูนย์กลางของรูปทรงพายโดยนำพื้นที่เส้นขอบครึ่งหนึ่ง (เส้นขอบ/2)
ทฤษฎีส่วนโค้ง (Arc) เมธอด fillArc() ที่สืบทอดมาจากคลาส java.awt.Graphics มอบวิธีง่ายๆ ในการวาดส่วนต่างๆ (หรือส่วนโค้ง) ของกราฟิกรูปทรงพาย:
g2d.fillArc(x_position, y_position, width, height, startAngle , SweepAngle);
จำนวนเต็ม x_position และ y_position แสดงถึงพิกัด x, y ของมุมซ้ายบนของส่วนโค้งที่จะเติม และจำนวนเต็มความกว้างและความสูงแสดงถึงขนาดเฉพาะ หากค่าความกว้างและความสูงเท่ากัน แผนภูมิวงกลมจะเป็นวงกลม หากความกว้างและความสูงไม่เท่ากัน แผนภูมิวงกลมจะเป็นวงรี
วิธีการ fillArc() กำหนดขนาดของส่วนโค้งตามค่าจำนวนเต็ม SweepAngle หากค่า SweepAngle เป็นบวก ส่วนโค้งจะถูกวาดในทิศทางทวนเข็มนาฬิกา มิฉะนั้นจะถูกวาดในทิศทางตามเข็มนาฬิกา
ขั้นตอนแรกในการวาดส่วนโค้งคือการใช้เมธอด getPieColor() ของวัตถุ pieColor เพื่อให้ได้สีของส่วนโค้งรูปวงกลมที่ใกล้ที่สุดและกำหนดให้กับส่วนโค้งปัจจุบัน:
g2d.setColor
(pc.getPieColor());
ผ่านอาร์เรย์ยอดขายแบบวนซ้ำอย่างต่อเนื่อง[] และสะสมเพื่อให้ได้ปริมาณการขายรวม:
salesTotal += sales[i];
เมื่อใช้ปริมาณการขายรวม คุณสามารถคำนวณเปอร์เซ็นต์ของยอดขายของผลิตภัณฑ์แต่ละรายการในปริมาณการขายรวม:
float perc = (sales [i]/salesTotal);
เราคำนวณ SweepAngle เพื่อกำหนดองศาให้กับแต่ละส่วนของส่วนโค้ง:
int SweepAngle = (int)(perc * 360);
หลังจากที่แต่ละส่วนของส่วนโค้งถูกวาดแล้ว startAngle จะเพิ่มขึ้นตามนั้น ไปที่ SweepAngle ปัจจุบัน เพื่อให้แน่ใจว่าส่วนโค้งปัจจุบันเริ่มต้นจากส่วนโค้งก่อนหน้า ดังนั้นจึงสร้างรูปร่างวงกลมที่สมบูรณ์
ไอคอนการแสดงผล ไอคอนเป็นวิธีที่ง่ายที่สุดในการแสดงส่วนต่างๆ ของกราฟวงกลม ขนาดของไอคอนควรสอดคล้องกับจำนวนที่มีอยู่ในแผนภูมิวงกลม
รูปที่ B แสดงกราฟวงกลมที่สมบูรณ์และไอคอนที่สัมพันธ์กับแต่ละส่วน รวมถึงชื่อผลิตภัณฑ์ ปริมาณการขายรวม และส่วนแบ่งของแต่ละส่วน
รูปภาพ ข
สรุป
บทความนี้อธิบายวิธีการใช้ JSP เพื่อวาดวิธีการและอัลกอริทึมกราฟิกพาย วิธีการและอัลกอริธึมเหล่านี้เรียบง่ายและใช้งานได้จริง และนักพัฒนาสามารถใช้ประโยชน์จากวิธีการเหล่านี้ได้อย่างเต็มที่