เทคนิคการสร้างกราฟสวยใน PHP ด้วย JpGraph

ผู้เขียน: ณัฐภัชร ณ เขาวงกต
ISBN: 978-974-7519-23-5
จำนวนหน้า: 356 หน้า
ขนาด: 21 x 29.7 ซม.
รูปแบบหนังสือ: หนังสือขาวดำ

ราคาปก: 295 บาท
ราคาสั่งซื้อ: 260 บาท
ส่งหน้านี้ให้เพื่อน  


  • อธิบายเทคนิคและวิธีการติดตั้งโปรแกรมเพื่อเตรียมพร้อมการใช้งาน PHP ทั้งใน IIS และ Apache อย่างละเอียดทุกขั้นตอน
  • นำเสนอเทคนิคการวาดเส้นและสัญลักษณ์ รวมถึงการสร้างกราฟิกรูปทรงต่างๆ ด้วย GD
  • เพิ่มลูกเล่นในการสร้างกราฟให้หลากหลายและซับซ้อนยิ่งขึ้นด้วยการใช้ JpGraph ซึ่งใช้งานง่ายและเป็นฟรีแวร์
  • สร้างกราฟทุกรูปแบบ ทั้งกราฟบนแกน X แกน Y หรือแม้กระทั่งกราฟแบบพิเศษที่ไม่ได้อยู่บนแกน X และแกน Y
  • สร้างกราฟโดยการเขียนสคริปต์ดึงข้อมูลอัตโนมัติจากฐานข้อมูล
  • ฟรี! ดาวน์โหลดตัวอย่างซอร์ซโค้ดในเล่มผ่านทางเว็บไซต์

หนังสือเล่มนี้เหมาะกับใครบ้าง

  • ผู้ที่ต้องการสร้างเว็บแอปพลิเคชันด้วยสคริปต์ PHP ในทุกระดับ
  • ผู้ที่ต้องการสร้างกราฟและตกแต่งกราฟิกด้วยการเขียนสคริปต์ PHP
  • ผู้ที่ต้องการเพิ่มเติมลูกเล่นและระบบการทำงานที่ซับซ้อนให้กับเว็บไซต์ของตนเอง

จะอ่านหนังสือเล่มนี้ ควรรู้อะไรมาก่อนบ้าง

  • หลักการทำงานพื้นฐานของเทคโนโลยีเว็บ
  • วิธีการติดตั้งโปรแกรมบน Windows หรือ Linux
  • การเขียนเว็บเพจเบื้องต้นด้วยภาษา HTML และ PHP

จะทดสอบตัวอย่างในหนังสือเล่มนี้ ต้องมีอะไรบ้าง

  • เครื่องคอมพิวเตอร์ที่ติดตั้งระบบปฏิบัติการ Windows XP
  • โปรแกรมเว็บเซิร์ฟเวอร์ IIS 5.1 หรือ Apache 2.2 (อ่านวิธีการดาวน์โหลดและติดตั้งได้ในบทที่ 2 และ 3)


บทที่ 1 เปิดตัวคู่พระนางในการสร้างกราฟบนเว็บ

รูปกราฟเป็นการนำเสนอผลงานหรือรายงานต่างๆ เพื่อให้ผู้ชมสามารถเข้าใจผลสรุปทั้งหมดของข้อมูลได้อย่างรวดเร็ว แต่ว่าเราจะมีวิธีการสร้างกราฟบนเว็บได้อย่างไรโดยที่ไม่ต้องสร้างกราฟจากโปรแกรมอื่นๆ เช่น Excel มาก่อน เนื้อหาของบทนี้จะชี้ทางสว่างอันสดใสให้กับคุณ

  • อะไรเอ่ย GD?
  • รูปแบบไฟล์ต่างๆ ที่ GD สามารถสร้างได้
  • เปิดตัวนางเอกคนสวยคือ JpGraph
    • JpGraph คืออะไร เป็นใคร มาจากไหน???

บทที่ 2 ติดตั้ง PHP บน Windows XP SP2 + IIS 5.1

GD เป็นไลบรารีที่รันบน PHP และ IIS 5.1 ก็เป็นเว็บเซิร์ฟเวอร์ตัวหนึ่งที่นักพัฒนาเว็บไซต์นิยมใช้เป็นเว็บเซิร์ฟเวอร์ จำลองเพื่อทดสอบในการเขียนเว็บ ดังนั้นบทนี้จึงเป็นการสาธยายเรื่องราวการติดตั้ง PHP บนเว็บเซิร์ฟเวอร์ IIS 5.1 แบบหมดเปลือกทั้ง PHP4 และ PHP5

  • ติดตั้ง IIS 5.1
  • ติดตั้ง PHP
    • การติดตั้ง PHP 5
    • การติดตั้ง PHP 4

บทที่ 3 ติดตั้ง PHP บน Windows XP SP2 + Apache 2.2

ลืมไม่ได้เลยจริงๆ สำหรับเว็บเซิร์ฟเวอร์ยอดนิยมอันดับหนึ่งที่มีการปรับปรุงและพัฒนาเวอร์ชันใหม่มาเรื่อยๆ เล่นเอาคนอื่นพัฒนาตามแทบไม่ทัน ดังนั้นเพื่อให้เราอินเทรนด์อยู่เสมอ การติดตั้ง PHP4, PHP5 บน Apache 2.2 จึงเป็นความรับผิดชอบของเนื้อหาบทนี้

  • ติดตั้ง Apache ใช้ Apache เท่สะบัด
  • ติดตั้ง PHP
    • การติดตั้ง PHP 5
    • การติดตั้ง PHP 4

บทที่ 4 สิบกระบวนท่าพื้นฐานของ GD

GD มีฟังก์ชันในการวาดภาพไว้ให้เลือกใช้งานอย่างมากมาย ไม่ว่าจะเป็นการวาดเส้นตรง เส้นโค้ง วงกลม เส้นประ การเติมสี การเขียนตัวหนังสือทั้งภาษาอังกฤษและภาษาไทย และที่สำคัญก็คือว่าฟังก์ชันต่างๆ เหล่านี้ เป็นสิ่งจำเป็นพื้นฐานเพื่อให้เข้าถึงการวาดภาพด้วย GD อย่างทะลุปรุโปร่ง

  • เตรียมเครื่องมือประจำตัวจิตรกรน้อย (ผู้น่ารัก :-D)
    • เอาหน้าจอมาแทนกระดาษ
    • รู้จักสีและวิธีการผสมสี
    • ติดตั้งโปรแกรมเขียนสคริปต์ไว้แทนพู่กัน
  • ได้เวลาจิตรกรน้อยสะบัดปลายพู่กันแล้วครับผมมม
  • กระบวนท่าที่หนึ่ง ทบทวนขั้นตอนการวาดภาพ
  • กระบวนท่าที่สอง รู้จักกับสีพื้นของ GD ให้ถ่องแท้
  • กระบวนท่าที่สาม พิสูจน์ขนาดของภาพกับพื้นที่ในการวาดภาพ
  • กระบวนท่าที่สี่ บันทึกภาพออกเป็นไฟล์
  • กระบวนท่าที่ห้า เขียนรูปนูน โค้ง เว้า กันหน่อย
  • กระบวนท่าที่หก กำหนดรูปแบบของเส้นเอง
  • กระบวนท่าที่เจ็ด คัดลายมือตัวบรรจงเต็มบรรทัด
  • กระบวนท่าที่แปด ประทับตัวหนังสือลงในภาพถ่าย
  • กระบวนท่าที่เก้า วาดรูปธงชาติประกาศความเป็นไทย
  • กระบวนท่าที่สิบ เขียนกราฟแรกในชีวิต (รวมกระบวนท่าที่ 1 - 9)
  • การนำสคริปต์ไปใช้งาน
  • รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 5 ไม้เท้าวิเศษเสกกราฟให้เสร็จทันใจด้วย JpGraph

ในที่สุดก็ถึงเวลาออกโรงของนางเอกคนสวยของเรานั่นคือ JpGraph ที่จะมาช่วยเนรมิตกราฟต่างๆ ให้เราได้อย่างง่ายดายและสวยงาม ดังนั้นบทนี้เราก็ไปยลโฉมของเธอ ว่าจะเด็ดสะระตี่สมคำร่ำลือหรือเปล่า???

  • การติดตั้ง JpGraph
  • ปรับแต่ง JpGraph ให้ถูกคอ ถูกใจ
    • เปิดใช้งาน JpGraph ในแบบแคช
    • ต้องการใช้ฟอนต์แบบ True Type Font
  • หาตัวช่วยเมื่อต้องใช้งาน JpGraph
    • คู่มือของ JpGraph
    • ข้อมูลในเว็บไซต์
  • JpGraph ทำอะไรได้บ้าง
  • รู้จัก JpGraph ให้มากขึ้นกับไฟล์ที่สำคัญต่างๆ
  • ใช้สีต่างๆ แบบไม่ต้องผสมเอง
  • ประเภทของฟอนต์ที่มีให้ใช้ตามอัธยาศัย

บทที่ 6 ห้ากระบวนท่าผ่ากราฟเส้นสำหรับมือใหม่

"ตึกยิ่งสูงต้องมาจากฐานรากที่มั่นคง" เช่นเดียวกับการเรียนรู้ที่จำเป็นต้องปูพื้นฐานให้ดี และการเรียนรู้ JpGraph ก็หนีไม่พ้น คุณจำเป็นต้องผ่านห้ากระบวนท่าพื้นฐานในบทนี้ให้ได้เสียก่อน ขอเตือนว่าอย่าได้คิดหนีเป็นอันขาด ไม่อย่างนั้นคนที่จะไม่ปลื้ม ท้ายที่สุดก็คือคุณนั่นเอง อิอิ...

  • หลักการใช้ JpGraph
  • กระบวนท่าที่หนึ่ง เข้าใจพื้นฐานการใช้ JpGraph
  • กระบวนท่าที่สอง ว่าด้วยเรื่องแกนกับมาร์จินต่างๆ ของกราฟ
  • กระบวนท่าที่สาม ว่าด้วยเรื่องแสดงข้อมูลบนกราฟและตกแต่งเส้นกราฟ
    • การปรับแต่งสีและความหนาของเส้นกราฟ
    • การแสดงผลค่าจุดต่างๆ ของกราฟ
  • กระบวนท่าที่สี่ ทำสัญลักษณ์บอกตำแหน่งข้อมูล
    • สัญลักษณ์แบบพื้นฐาน
    • สัญลักษณ์แบบพิเศษ
    • สัญลักษณ์รูปธงชาติ
    • สัญลักษณ์แบบรูปภาพที่นำมาเอง
  • กระบวนท่าสุดท้าย การกำหนดฉากหลังของกราฟ
    • พื้นหลังเป็นรูปธงชาติ
    • พื้นหลังเป็นรูปที่นำมาเอง
    • พื้นหลังเป็นสีแบบ gradient
  • รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 7 แปดกระบวนท่าทะยานสู่สุดยอดฝีมือสร้างกราฟเส้น

เปิดเผยตัวตนของกราฟเส้นให้มากขึ้น ด้วยกราฟหลายเส้นในแกนเดียวกันและแบบสองแกน ขยายความหมายเส้นกราฟด้วย Legend เสริมสวยกราฟด้วยเส้นกริด พร้อมทั้งบอกวิธีการกำหนดสเกลของกราฟเส้นและอื่นๆ ที่เหลือ คุณต้องค้นหาเอาเองในเนื้อหาของบทนี้

  • กระบวนท่าที่หนึ่ง การเพิ่มข้อมูลและเส้นกราฟแบบหนึ่งแกน Y
  • กระบวนท่าที่สอง การเพิ่มข้อมูลและสร้างกราฟเส้นแบบสองแกน Y
  • กระบวนท่าที่สาม บ่งชี้เส้นกราฟด้วยการแสดง Legend
  • กระบวนท่าที่สี่ รอบรู้เรื่องของเส้นกริด
  • กระบวนท่าที่ห้า คัดเลือกสเกลให้ถูกตามครรลองครองธรรม
  • กระบวนท่าที่หก กำหนดค่าสูงสุดต่ำสุดของสเกลด้วยตัวเอง
  • กระบวนท่าที่เจ็ด เผด็จศึกน้อง tick
  • กระบวนท่าที่แปด เอาใจวัยใสด้วยกราฟเส้นแบบใส่สูตร (แบบง่ายๆ)
  • รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 8 ส่งสาส์นท้าดวลวาดกราฟแท่งแข่งกับ Excel

นอกจากกราฟเส้นแล้ว กราฟแท่งก็เป็นอีกหนึ่งความสามารถของ JpGraph ที่มั่นใจมากขนาดประกาศศักดาขอเจอ Excel แบบตัวต่อตัว แต่สุดท้ายแล้วท่านผู้อ่านเท่านั้น ที่จะเป็นคนตัดสินผลแพ้ชนะ เชิญลงคะแนนได้เลยครับ

  • กระบวนท่าที่หนึ่ง เริ่มประดิดประดอยกราฟแท่ง
  • กระบวนท่าที่สอง ปรับแต่งกราฟแท่งให้สาแก่ใจ
    • การทำไตเติลแบบเท็บ (tab title)
    • แสดงค่าของแท่งกราฟ
    • ขยับขยายบีบหดความกว้างของแท่งกราฟ
    • จับเงามาใส่ให้แท่งกราฟ
  • กระบวนท่าที่สาม แต้มสีเติมสันด้วยสีแบบ gradient
  • กระบวนท่าที่สี่ สักลายโชว์ความเก๋าให้เจ้าแท่งกราฟ
  • กระบวนท่าที่ห้า สร้างกราฟแท่งหลายแท่งแข่งความสูง
  • กระบวนท่าที่หก การสร้างกราฟแท่งแบบสะสม
  • กระบวนท่าที่เจ็ด รวมกระบวนท่าห้า หก ทำกราฟแท่งสะสมแบบหลายแท่ง
  • รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 9 สามกระบวนท่าเบาๆ บอกเล่าเรื่อง title, footer, text และภาษาไทย

เราสื่อความหมายด้วยรูปกราฟอย่างเดียวคงไม่เพียงพอต่อความเข้าใจของผู้ชม ดังนั้นสิ่งที่ต้องเพิ่มเติมรายละเอียดลงไปในกราฟก็คือ "ตัวหนังสือ" เพื่อเสริมความเข้าใจในตัวกราฟให้มากยิ่งขึ้น ด้วย title, footer, text อีกทั้งบอกวิธีการสะกดตัวอักษรไทยให้กับ JpGraph อีกด้วย

  • กระบวนท่าที่หนึ่ง ขานไขใจความเรื่อง title และ footer
    • สามศรีพี่น้อง title, subtitle, subsubtitle
    • ลูกพี่ลูกน้องของ title ชื่อว่า footer
  • กระบวนท่าที่สอง ตีตราจองแสดงความเป็นเจ้าของกราฟด้วย text
  • กระบวนท่าที่สาม สอนภาษาไทยให้ JpGraph
  • รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 10 สะบัดพู่กันวาดกราฟวงกลม นั่งตากลม ชมจันทร์ ฝันถึงเธอ

กราฟวงกลมได้รับความนิยมชื่นชอบไม่แพ้กราฟเส้นหรือกราฟแท่งอย่างแน่แท้เลยเชียว และกราฟวงกลมที่สร้างสรรค์ด้วย JpGraph นั้นย่อมที่จะไม่ธรรมดา มีทั้งกราฟวงกลม สองมิติ สามมิติ แล้วก็... อะอะอ้า!!! ไม่บอกหรอก ต้องติดตามกันเอาเอง

  • กระบวนท่าที่หนึ่ง วาดกราฟวงกลมแบบ 2 มิติ (2D)
  • กระบวนท่าที่สอง แต่งกราฟวงกลมให้ต้องตาโดนใจ
    • กำหนดฉากหลังให้ดูอลังการ
    • เปลี่ยนขนาดและย้ายตำแหน่งจุดศูนย์กลางหาฮวงจุ้ยใหม่
    • เปลี่ยนสีของ slice ซะใหม่ให้โฉบเฉี่ยว
    • งานนี้จะขาด legend ไม่ได้เลย
    • เปลี่ยนมุมเริ่มต้นของการแบ่ง slice
    • กำหนดสีของเส้นขอบและแสดงหรือไม่แสดงเส้นขอบ
    • ปรับเปลี่ยนรูปแบบค่าของ label
  • กระบวนท่าที่สาม label ของวงกลมเป็นเรื่องยืดยาว
  • กระบวนท่าที่สี่ เชิญประชุมกราฟวงกลมหลายๆ วง
  • กระบวนท่าที่ห้า ใช้ Guide line เมื่อข้อมูลในกราฟแออัดเป็นปลากระป๋อง
  • กระบวนท่าที่หก สร้างกราฟวงกลมแบบ 3 มิติ (3D)
    • การปรับความหนาหรือความสูงของวงกลม
    • การปรับระยะห่าง label
    • การตีเส้นขอบของวงกลมสามมิติ
  • กระบวนท่าที่เจ็ด กำหนดสีของ slice ด้วยสีแบบธีม
  • กระบวนท่าที่แปด ระเบิดกราฟออกเป็นชิ้นๆ
    • ระเบิดแค่หนึ่ง slice
    • ระเบิดหลายๆ slice
    • ระเบิดทุกๆ slice ในวงกลม
  • กระบวนท่าที่เก้า จัดฉากมุมมองแสงเงาให้กราฟวงกลม
  • กระบวนท่าที่สิบ นำวงกลมสอดไส้ในกราฟวงกลม
    • เขียนข้อความลงในวงกลมวงใน
    • กำหนดสีของวงกลมวงใน
    • กำหนดขนาดวงกลมวงใน
  • รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 11 วาดกราฟแบบพิสดารภาคหนึ่งกับกราฟแบบต่างๆ บนแกน X และ Y

กราฟเส้น กราฟแท่ง กราฟวงกลมน่ะหรือ หลีกไป ถึงเวลากราฟแบบใหม่ๆ หรือจะเรียกว่า "กราฟแนว" เลียนแบบ "เด็กแนว" คงจะไม่ว่ากัน ซึ่ง "กราฟแนว" กลุ่มแรกที่จะแนะนำให้รู้จักในบทนี้ก็คือ กราฟแบบ error plot, line error plot, scatter plot, stock plot และกราฟลูกครึ่งระหว่างกราฟเส้นกับกราฟแท่ง ก็จะไม่ให้ผมเรียกว่า "กราฟแนว" ได้ยังไง แค่ชื่อยังต้องเรียกเป็นภาษาอังกฤษเลย ไปรู้จักพวกเขาทีละรายเลยดีกว่าครับ จะได้รู้กันชะทีว่า "กราฟแนว" นั้นจะแจ๋วเหมือน "เด็กแนว" หรือเปล่า ???

  • กระบวนท่าที่หนึ่ง เปิดตัวน้องใหม่เบอร์หนึ่งกับกราฟแบบ error plot
  • กระบวนท่าที่สอง วาดกราฟเส้นแปลงร่างเป็นกราฟแบบ line error plot
  • กระบวนท่าที่สาม ดูการกระจายตัวของข้อมูลด้วยกราฟแบบ scatter plot
  • กระบวนท่าที่สี่ สองกราฟคู่แฝดป่วนตลาดหุ้น
    • แฝดผู้พี่มีนามกรว่า Stock plot
    • แฝดผู้น้องชื่อ Box plot ขอรายงานตัวครับ
  • กระบวนท่าที่ห้า วาดกราฟลูกครึ่งระหว่างกราฟเส้นกับกราฟแท่ง
  • รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 12 วาดกราฟแบบพิสดารภาคสองกับกราฟที่ไม่ได้อยู่บนแกน X และ Y

หลังจากที่รู้จัก "กราฟแนว" กลุ่มแรกไปแล้ว บทนี้เรามาทำความรู้จักกับ "กราฟแนว" กลุ่มที่สอง ซึ่งมากันในแนวดูโอ เพราะมากันแค่สองแบบ คือ กราฟแบบ radar plot กับ polar plot แต่ว่าลีลาของดูโอคู่นี้จะเด็ดสะระตี่ขนาดไหน เชิญชมการแสดงของทั้งคู่ได้ในเวทีบทนี้

  • กระบวนท่าที่หนึ่ง กระทบไหล่ดาราชื่อดังกับกราฟแบบใยแมงมุม
  • กระบวนท่าที่สอง เสกสรรค์ปั้นแต่งเติมความใสให้กราฟใยแมงมุม
    • แต่งฉากหลังให้ตรึงตาตรึงใจ
    • เขียนไตเติลของแกนแสนสบาย
    • ปรับขนาดและกำหนดจุดศูนย์กลางในทำเลทอง
    • ใส่เส้นกริดพิชิตภาพลวงตา
    • เปลี่ยนสี่สัน ลายเส้น ให้สวยใส
    • เสริมบารมีด้วย legend
  • กระบวนท่าที่สาม สานสายใยให้ยุ่งเหยิงเมื่อเพิ่มข้อมูลหลายๆ เส้น
    • เปลี่ยนไตเติลของแกนให้เป็นภาษาไทย
    • สร้างเส้นกราฟขึ้นมาใหม่อีกหนึ่งเส้น
    • เปลี่ยน legend ให้เป็นภาษาไทย
    • เสริมสัญลักษณ์ให้เด่นบนเส้นกราฟ
  • กระบวนท่าที่สี่ วาดกราฟให้สุดขั้วกับ Polar plot
    • ว่าด้วยเรื่องขนาดของกราฟ
    • ชอบแบบ 180 หรือ 360 องศาดีล่ะจ๊ะ
    • รับรู้ความสำคัญของสเกล
  • กระบวนท่าที่ห้า แต่งกราฟแบบ polar plot ให้เข้าตาเธอ
    • เป่ามนต์เสกฉากหลังให้ดูขลัง
    • ตีกรอบบริเวณพื้นที่ในการพล็อตกราฟ
    • ปรับสีและโชว์เส้นกริด
    • การปรับตัวเลขลำดับมุม
    • ปรับแต่งสี ฟอนต์ label ของแกน
    • เสริมสวยให้กับเส้นกราฟ
  • รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 13 เพลงยุทธบทสุดท้ายกับการวาดกราฟจากฐานข้อมูล

กระบวนท่าสุดยอดของการวาดกราฟก็ต้องเป็นการวาดกราฟด้วยข้อมูลที่มาจากฐานข้อมูล ซึ่งจะทำให้กราฟที่ออกมาเปลี่ยนแปลงไปตามข้อมูลที่อยู่ในฐานข้อมูล และเพื่อความเป็นมืออาชีพมากกว่านั้น เราจะทำกราฟให้เป็นลักษณะ image map คือ สามารถคลิกลงไปในรูปกราฟแล้วแสดงข้อมูลหรือรูปกราฟอื่นๆ ตามมาได้ ดังนั้นเนื้อหาบทนี้จึงพลาดไม่ได้ด้วยประการทั้งปวง

  • กระบวนท่าที่หนึ่ง เมื่อกราฟเส้นเล่นกับฐานข้อมูล
  • กระบวนท่าที่สอง ถ่ายเทข้อมูลจากคลังมาตั้งแท่งกราฟ
  • กระบวนท่าที่สาม ระดมข้อมูลสถาปนากราฟวงกลม
  • กระบวนท่าที่สี่ ผูกสัมพันธ์ระหว่างกราฟกับเว็บเพจด้วย image map
  • รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

ภาคผนวก ก รายชื่อสีที่สามารถเรียกใช้ได้ใน JpGraph

ภาคผนวก ข รายชื่อและรูปธงชาติที่สามารถเรียกใช้ได้ใน JpGraph

ภาคผนวก ค รวมภาพสี