AdvanceDeveloperGoogle DevelopersMobile TechnologyNewbieProgramming LanguageSocial Media Marketing

รู้จักกับ Dynamics Icon แบบง่ายสำหรับพัฒนาร่วมกับ Google Chart API

รอบนี้ยังคงวนเวียนกับ Google API ครับ แต่จะเป็นส่วนของ Google Chart API ที่จะพาไปดูวิธีเรียก Dynamic Icon มาใช้บนเว็บไซต์ครับบทความนี้อาจจะสั้นไปนิดสำหรับหลายๆ คนแต่คิดว่าปริมาณนั้นคงไม่จำเป็นพาไปดู Work Shop หรือ How To กันเลยดีกว่า ซึ่งใครที่ยังไม่รู้จัก Google Chart นั้นอาจจะต้องเข้าไปอ่านบทความนี้ให้เข้าใจก่อนครับ “สร้างกราฟให้โดนใจด้วยบริการ Google Charts” หากว่าอ่านเข้าใจแล้วกลับมาดู Work Shop กันเลยรูปแบบ Dynamics Icon ของ Google Chart นั้นมีไว้เพื่อที่เราจะได้แทรก Icon ต่างๆ ลงไปในเว็บไซต์ หรือเอาง่ายๆ คือแทรกลงใน Google Maps เหมือนที่ผมเคยเกริ่นไว้เล็กน้อยในบทความ “การใช้งาน Google Street View API วางวัตถุพ่วงในแผนที่” ที่เป็นการสร้างไอคอนพิกัดขึ้นมาโดยที่ผมไม่ต้องสร้างเองเลยครับ

รูปแบบของการเรียก API ของ Dynamics Icon
การเรียกรูปภาพของ Dynamics Icon นั้นจะต้องเรียกผ่าน URL และ Parameter เล็กน้อยมีรูปแบบที่ตายตัวคือ

https://chart.googleapis.com/chart?chst=[ประเภทของ Icon]&chld=[ส่วนประกอบแรก]|[ส่วนประกอบสอง]|....|[สวนประกอบสุดท้าย]

ซึ่งถ้าผมลองพิมพ์ URL ด้านล่างลงไปในช่อง URL Address ว่า

http://chart.apis.google.com/chart?chst=d_bubble_icon_text_big&chld=wc|bb|ห้ามโช๊ะกัน|FFFFFF|000000

จะได้ผลลัพธ์ปรากฏบนหน้าเว็บไซต์ดังรูปข้างล่าง

ทดสอบ Dynamics Icon
ทดสอบ Dynamics Icon

ซึ่งทำให้เราพอจะรู้แล้วว่าถ้าเราเขียนเว็บแอพพลิเคชันมาตัวหนึ่งแล้วไม่อยากทำรูปภาพไอคอนเอง เราก็แค่เอา Tag HTML ไปครอบเช่น


ก็จะได้ภาพผลลัพธ์เช่นเดียวกันแต่เป็น Component ของ HTML แทนนั่นคือ Object รูปภาพ

แทรก Code Dynamics Icon ลงใน Tag HTML
แทรก Code Dynamics Icon ลงใน Tag HTML

ทาง Google ก็ได้สร้างตารางการใช้งานมาให้เราเอาไว้ใส่ค่าระหว่างตัวแปร Parameter ตรง chst= และ chld= ไว้ให้ครับ
Syntax ของ chst สามารถใส่ได้คือ

  • d_bubble_text_small จะได้ป้ายเล็ก
  • d_bubble_icon_text_big จะได้ป้ายใหญ่
  • d_bubble_texts_big จะได้ประโยคขอบมลใหญ่
  • chst=d_bubble_icon_texts_big ภาพแบบมีไอคอนและพาดหัวใหญ่
syntax การเรียกใช้เบื้องต้น
syntax การเรียกใช้เบื้องต้น

ส่วนของ chld นั้นก็จะมี Syntax ตามภาพที่ปรากฏด้านล่างมากมายครับ โดยทำการต่อ String ด้วย “|” ไปเรื่อยๆได้เลย

syntax การเรียกใช้เบื้องต้น
syntax การเรียกใช้เบื้องต้น
syntax การเรียกใช้เบื้องต้น
syntax การเรียกใช้เบื้องต้น
ตัวอย่างในการใช้ Parameter
ตัวอย่างในการใช้ Parameter
ซับซ้อนกว่านี้ก็ทำได้นะ แต่ไปอ่านวิธีทำเองไม่ยากหรอก
ซับซ้อนกว่านี้ก็ทำได้นะ แต่ไปอ่านวิธีทำเองไม่ยากหรอก

มีรูปแบบให้เลือกเล่น ตามนี้ครับ

http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=[ประเภท]|FFFF00

เลือกใส่ในส่วนของ [ประเภท] ได้ตามรูปด้านล่างเลยครับ

อยากได้อะไร จัดไปเลย เต็มที่!
อยากได้อะไร จัดไปเลย เต็มที่!

ตัวอย่าง
ใส่ ประเภทเป็น “pet” ก็ปรากฏแบบนั้นแหละ

ใส่ ประเภทเป็น "pet" ก็ปรากฏแบบนั้นแหละ
ใส่ ประเภทเป็น “pet” ก็ปรากฏแบบนั้นแหละ

อยากสนุกต่อลองไปศึกษาว่าเราจะออกแบบ Dynamics Icon ให้สวยนั้นทำแบบไหนได้บ้างที่นี่เลยครับ
https://google-developers.appspot.com/chart/infographics/docs/dynamic_icons
ขอให้สนุกครับ

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

One Comment

Leave a Reply

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน