วิชาคอมพิวเตอร์กราฟิก intro_vb_net_07_Bar_Chart การสร้างกราฟเส้นแท่งด้วย VB.NET โดย อ. นัฐพงศ์ ส่งเนียม http://www.siam2dev.com xnattapong@hotmail.com 1

บทนำ จากที่ผ่านมาเราได้ทำการศึกษาความรู้พื้นฐานเกี่ยวกับคอมพิวเตอร์กราฟฟิกส์มาบ้างแล้วและความรู้เกี่ยวกับการพัฒนาโปรแกรมด้วยภาษา VB.NET2005 ขั้นพื้นฐาน จากนี้ไปจะเน้นไปที่การเขียนโปรแกรมเชิงกราฟิก เช่น การสร้างเส้นตรง รูปเหลี่ยมต่างๆ วงกลม วงรี ทรงกลม และอื่นๆ ให้มากขึ้น ต่อไป โดยในบทนี้จะเป็นการประยุกต์ใช้เส้นตรง รูปสี่เหลี่ยม เพื่อใช้ในการสร้างกราฟ แบบต่างๆ เช่น กราฟเส้นตรง กราฟแท่ง เป็นต้น 2

กราฟแบบต่างๆ ใน MS-Excel 3

การสร้างกราฟแท่ง 4

สร้าง Project ใหม่ ไปที่เมนู File เลือก New เลือก Project 5

ตั้งชื่อ VB_07_Create_Bar_Chart กำหนด Location :: C:\CG_Example กด OK 6

กำหนดคุณสมบัติ Form Name : Frm_Create_Bar_Charts BackColor : BackgroundImage : Size : 1024, 500 Text : โปรแกรมสร้างกราฟแท่ง Bar Chart 7

นำ GroupBox มาวางดังรูป 8

กำหนดคุณสมบัติ GroupBox ทั้งสาม Name : GB1-GB3 Text : GB1 Size : 847, 350 GB3 GB2 9

นำ PictureBox มาวางใน GB3 ดังรูป Size : 847, 350 10

กำหนดคุณสมบัติของ PictureBox ดังนี้ Name : PB1 BackColor : สีเทา Size : 847, 350 11

นำ RadioButton มาวางใน GB1 ดังรูป 12

กำหนดคุณสมบัติของ RadioButton ดังนี้ Name : R_Line Text : Line -------------------------------------- Name : R_Bar Text : Bar Name : R_Circle Text : Circle 13

นำ CheckBox มาวางใน GB2 ดังรูป Name : ChkShowGrid Text : Show Grid -------------------------------------- Name : ChkXYaxis Text : X Y axis Name : ChkVolume Text : Show Data Volume Name : ChkShowYear Text : Show Year 14

นำ Button มาวาง ดังรูป และกำหนดคุณสมบัติดังนี้ Name : BtnOK Text : ตกลง -------------------------------------- Name : BtnCancel Text : ยกเลิก Name : BtnExit Text : Exit 15

Double click ที่ปุ่ม BtnOK แล้วเขียนคำสั่ง บรรทัดแรกสุด เท่านั้น 16

Double click ที่ปุ่ม ตกลง นำเข้า Namespace ที่เกี่ยวข้องกับ graphics Imports System.Drawing 17

ประกาศตัวแปร แบบ Global ตัวแปรนี้จะสามารถใช้งานได้ทุกส่วนของฟอร์มนี้ 18

ดับเบิ้ลคลิกที่ฟอร์ม เพื่อเข้าไปที่เหตุการณ์ form_load แล้วพิมพ์คำสั่งดังนี้ 19

20

21

เริ่มต้นด้วยการสร้าง grid ก่อน 22

สร้าง Grid สร้าง โปรแกรมย่อย Private Sub Plot_grid() 23

แทรกคำสั่งเพื่อสร้าง หัวแปรงพู่กัน ทั้ง 2 แบบ 24

แทรกคำสั่งเพื่อสร้าง หัวแปรงพู่กัน ทั้ง 2 แบบ พิมพ์ต่อ 25

คำสั่งในปุ่ม OK บางส่วน 26

สร้างแกน X และ Y พิมพ์ต่อจาก ก่อนหน้านี้ 27

กด F5 เพื่อดูผลลัพธ์คำสั่งในแกน 28

ผลลัพธ์ในการสร้าง Bar 29

สร้างโปรแกรมย่อยในการแสดงปี 30

สร้างแท่งกราฟทั้ง 4 แท่ง อันนี้พิมพ์ ทดสอบ 2 แท่งแรกก่อน 31

สร้างแท่งกราฟ อีกสองแท่งที่เหลือ 32

กด F5 รันดูผลลัพธ์ 33

คำสั่งในการปุ่ม OK ที่สมบูรณ์ 34

ในปุ่ม Cancel 35

ดับเบิ้ลคลิกที่ปุ่ม Exit แล้วเขียนคำสั่งดังนี้ 36

ให้นักศึกษากลับไปเขียนคำสั่งส่วนที่ขาดให้ครบ เสร็จสมบูรณ์ แบบฝึกหัด ให้นักศึกษากลับไปเขียนคำสั่งส่วนที่ขาดให้ครบ เสร็จสมบูรณ์ 37