เริ่มต้นใช้งานแผนภูมิ

หน้านี้จะอธิบายถึงพื้นฐานของการใช้ Chart API เพื่อสร้างแผนภูมิ

นโยบายการใช้งาน Google Chart

ไม่มีการจำกัดจำนวนการเรียกใช้ต่อวันไปยัง Google Chart API อย่างไรก็ตาม เราขอสงวนสิทธิ์ในการบล็อกการใช้งานใดๆ ที่เราพิจารณาว่าเป็นการละเมิด

ภาพรวม

การดูแผนภูมิในเอกสารนี้

รูปภาพแผนภูมิทั้งหมดในเอกสารประกอบนี้จะสร้างขึ้นแบบเรียลไทม์โดยใช้ Chart API หากต้องการดู URL ของรูปภาพ ให้ทำดังนี้

  • ถ้าคุณใช้ Firefox ให้คลิกขวาแล้วเลือก "ดูรูปภาพ" หรือ "คุณสมบัติ"
  • หากคุณกำลังใช้ Internet Explorer ให้คลิกขวาแล้วเลือก "คุณสมบัติ"

เอกสารนี้มักจะแสดง URL ในหลายบรรทัดเพื่อให้อ่านง่ายขึ้น เมื่อใช้ Google Chart API คุณต้องใส่ URL ในบรรทัดเดียว

Google Chart API จะแสดงรูปภาพแผนภูมิเพื่อตอบกลับคำขอ GET หรือ POST ของ URL API สามารถสร้างแผนภูมิได้หลายประเภท ตั้งแต่แผนภูมิวงกลมหรือแผนภูมิเส้นไปจนถึงคิวอาร์โค้ดและสูตรต่างๆ ข้อมูลทั้งหมดเกี่ยวกับแผนภูมิที่คุณต้องการ เช่น ข้อมูลแผนภูมิ ขนาด สี และป้ายกำกับ เป็นส่วนหนึ่งของ URL (สำหรับคำขอ POST จะแตกต่างไปเล็กน้อย แต่ไม่ต้องกังวลไปในขณะนี้)

URL ทั้งหมดที่ต้องระบุคือประเภทแผนภูมิ ข้อมูล และขนาดเพื่อทำให้แผนภูมิแบบง่ายที่สุดเป็นไปได้ คุณจะพิมพ์ URL นี้โดยตรงในเบราว์เซอร์ หรือชี้ไปที่ URL ด้วยแท็ก <img> ในหน้าเว็บก็ได้ ตัวอย่างเช่น คลิกลิงก์นี้เพื่อดูแผนภูมิวงกลม

https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World

 

ลิงก์ก่อนหน้านี้เป็นตัวอย่างของ URL ของ Chart API พื้นฐาน URL แผนภูมิทั้งหมดมีรูปแบบต่อไปนี้

https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...

URL ทั้งหมดขึ้นต้นด้วย https://chart.googleapis.com/chart? ตามด้วยพารามิเตอร์ที่ระบุข้อมูลและลักษณะที่ปรากฏในแผนภูมิ พารามิเตอร์คือคู่ name=value คั่นด้วยอักขระเครื่องหมายแอมเพอร์แซนด์ (&) และพารามิเตอร์จะอยู่ในลำดับใดก็ได้หลัง ? แผนภูมิทั้งหมดต้องมีพารามิเตอร์ต่อไปนี้เป็นอย่างน้อย: cht (ประเภทแผนภูมิ), chd (ข้อมูล) และ chs (ขนาดแผนภูมิ) อย่างไรก็ตาม มีพารามิเตอร์อื่นๆ อีกมากมายสำหรับตัวเลือกเพิ่มเติม และคุณระบุพารามิเตอร์เพิ่มเติมได้มากเท่าที่แผนภูมิรองรับ

มาตรวจสอบ URL ด้านบนอย่างละเอียดกัน

URL คอมโพเนนต์

แผนภูมิวงกลมสีเหลือง

https://chart.googleapis.com/chart?
  cht=p3&
  chs=250x100&
  chd=t:60,40&
  chl=Hello|World
https://chart.googleapis.com/chart?
นี่คือ URL ฐานสำหรับคำขอเกี่ยวกับแผนภูมิทั้งหมด
cht=p3
ประเภทแผนภูมิคือแผนภูมิวงกลม 3 มิติ
chs=250x100
ขนาดแผนภูมิ (กว้าง x สูง) หน่วยเป็นพิกเซล ดูค่าสูงสุดที่นี่
chd=t:60,40
ข้อมูลในแผนภูมิ ข้อมูลนี้อยู่ในรูปแบบข้อความธรรมดา แต่มีรูปแบบอื่นๆ ด้วย
chl=Hello|World
ป้ายกำกับส่วนแบ่ง
&
คั่นพารามิเตอร์ด้วยเครื่องหมายแอมเพอร์แซนด์ หมายเหตุ: เมื่อฝัง URL ใน HTML เช่น เป็นแอตทริบิวต์ src ของแท็ก <img> คุณควรแทนที่ & ระหว่างพารามิเตอร์ด้วยอักขระ &amp; ซึ่งรวมถึงเมื่อคุณสร้าง HTML ของหน้าเว็บด้วย PHP หรือภาษาอื่น อย่างไรก็ตาม เมื่อพิมพ์ URL ในเบราว์เซอร์หรือเมื่อเรียก URL ในโค้ด เช่น เมื่อดึงข้อมูล URL ใน PHP หรือ Perl คุณควรใช้เครื่องหมาย &

คัดลอกและวาง URL นี้ในเบราว์เซอร์แล้วลองทําการเปลี่ยนแปลงบางอย่างโดยใส่ค่าเพิ่มเติมลงในข้อมูล (อย่าลืมใส่คอมมาก่อนค่าข้อมูลใหม่แต่ละค่า) เพิ่มป้ายกำกับใหม่ (ใส่เครื่องหมาย | ก่อนค่าใหม่แต่ละค่า) ทำให้แผนภูมิมีขนาดใหญ่ขึ้น

กลับไปด้านบน

วิธีสร้างแผนภูมิ

ต่อไปนี้เป็นวิธีสร้างแผนภูมิภาพ

  1. เลือกประเภทแผนภูมิ ดูแกลเลอรีสำหรับรายการแผนภูมิ โดยพารามิเตอร์ cht จะระบุประเภทแผนภูมิ ร่างองค์ประกอบทั้งหมดที่คุณต้องการให้แผนภูมิมี (แกน ป้ายกำกับ พื้นหลัง และอื่นๆ) และหากจำเป็น ให้คำนวณขนาดพิกเซลสำหรับองค์ประกอบต่างๆ (ขนาดแผนภูมิรวม ขนาดของคำอธิบาย และอื่นๆ) คุณควรอ่านเอกสารประกอบสำหรับประเภทแผนภูมิอย่างละเอียดก่อน มิเช่นนั้นอาจมีประสบการณ์ที่น่าหงุดหงิด
  2. สร้างและจัดรูปแบบข้อมูลแผนภูมิ จะมีการระบุข้อมูลโดยใช้พารามิเตอร์ chd คุณต้องเลือกรูปแบบที่จะใช้กับข้อมูลของคุณ ดังนี้
    • เลือกรูปแบบข้อมูล คุณอาจใช้รูปแบบข้อความอย่างง่ายสำหรับข้อมูลแผนภูมิ ซึ่งอ่านง่าย แต่ใช้พื้นที่มากขึ้นในการส่ง หรือจะใช้การเข้ารหัสประเภทใดประเภทหนึ่งซึ่งมีขนาดน้อยกว่าในการส่ง แต่จำกัดช่วงของค่าที่ส่งได้
    • ตัดสินใจว่าต้องปรับขนาดข้อมูลให้พอดีกับแผนภูมิหรือไม่ รูปแบบที่ต่างกันจะรองรับช่วงของค่าที่ต่างกัน คุณอาจต้องปรับขนาดข้อมูลเพื่อให้ครอบคลุมค่าทั้งหมดที่ได้จากรูปแบบของคุณเพื่อสร้างความแตกต่างที่ชัดเจนมากขึ้น ซึ่งทำได้โดยการปรับขนาดข้อมูลให้พอดีกับรูปแบบข้อมูลที่คุณใช้ หรือใช้การจัดรูปแบบข้อความที่มีการปรับขนาดที่กำหนดเองก็ได้
    • เข้ารหัสข้อมูล หากจำเป็น หากคุณเลือกรูปแบบที่เข้ารหัส เราจะมี JavaScript เพื่อช่วยในการเข้ารหัสประเภทอื่นๆ
  3. ระบุขนาดของแผนภูมิ คุณจะระบุขนาดแผนภูมิโดยใช้พารามิเตอร์ chs ดูเอกสารประกอบเกี่ยวกับรูปแบบและค่าสูงสุด
  4. เพิ่มพารามิเตอร์อื่นๆ เอกสารของแต่ละแผนภูมิจะแสดงพารามิเตอร์ที่ไม่บังคับที่ใช้ได้ ตัวเลือกทั่วไปรวมถึงป้ายกำกับ ชื่อ และสี โปรดทราบว่าป้ายกำกับหรือข้อความชื่อเรื่องทั้งหมดต้องเข้ารหัสแบบ UTF-8 โปรดทราบว่ามีพารามิเตอร์จำนวนมากที่ให้คุณป้อนค่าได้หลายรายการ เช่น พารามิเตอร์ chm ช่วยให้คุณวางรูปร่างบนจุดข้อมูลจุดเดียวในแผนภูมิได้ คุณวางรูปร่างในจุดข้อมูลหลายจุดโดยใช้พารามิเตอร์ chm ได้ แต่การทำเช่นนี้จะไม่ระบุพารามิเตอร์ chm หลายครั้งใน URL (เช่น ผิด: chm=square&chm=circle&chm=triangle) แต่พารามิเตอร์ที่มีหลายค่าจะใช้ตัวคั่น เช่น เครื่องหมายคอมมาหรือแถบแนวตั้ง ระหว่างค่าหลายค่าในพารามิเตอร์เดียวกัน สำหรับ chm นี่คือแถบ คุณจึงจะมีหน้าตาดังนี้ RIGHT: chm=square|circle|triangle ดูรายละเอียดของแต่ละพารามิเตอร์เพื่อเรียนรู้วิธีระบุพารามิเตอร์หลายรายการ
  5. สร้างสตริง URL URL ขึ้นต้นด้วย https://chart.googleapis.com/chart? และตามด้วยพารามิเตอร์ที่ไม่บังคับทั้งหมด (cht, chd, chs) และพารามิเตอร์ที่ไม่บังคับ หมายเหตุ: หากใช้ URL ในแท็ก <img> คุณจะต้องเปลี่ยนอักขระ & ทั้งหมดเป็น &amp; ในลิงก์ เช่น <img src="https://chart.googleapis.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" />
  6. ใช้ GET หรือ POST เพื่อรับรูปภาพ GET คือเมื่อคุณพิมพ์ URL ลงในเบราว์เซอร์โดยตรงหรือใช้แท็ก <img> ก็ได้ อย่างไรก็ตาม URL จะมีความยาวได้ไม่เกิน 2K ดังนั้น หากคุณมีข้อมูลมากกว่านั้น หรือลิ้มรสเลือด คุณควรพิจารณาใช้ POST แทนตามที่อธิบายไว้ที่นี่
  7. สร้างภูมิภาคที่คลิกได้ คุณยังเลือกที่จะสร้างแผนที่รูปภาพสำหรับแผนภูมิได้ ซึ่งจะให้คุณเพิ่มไฮเปอร์ลิงก์หรือคลิกองค์ประกอบไปยังองค์ประกอบแผนภูมิที่ต้องการ ดูรายละเอียดได้ที่การสร้างแผนที่รูปภาพแผนภูมิ

กลับไปด้านบน

คำศัพท์เกี่ยวกับแผนภูมิ

คำศัพท์สำคัญที่เราใช้ในเอกสารนี้มีดังนี้

ซีรีส์
ชุดข้อมูลที่เกี่ยวข้องในแผนภูมิ สิ่งที่ประกอบขึ้นเป็นชุดขึ้นอยู่กับประเภทของแผนภูมิ ได้แก่ ในแผนภูมิเส้น ชุดเนื้อหาคือเส้นเดียว ในแผนภูมิวงกลม แต่ละรายการจะเป็นชิ้นส่วน และชิ้นส่วนทั้งหมดประกอบกันเป็นชุด ในแผนภูมิแท่ง ชุดคือแท่งทั้งหมดจากข้อมูลชุดเดียวกัน ชุดข้อมูลที่ต่างกันอาจจัดกลุ่มไว้ข้างกันหรือเรียงซ้อนกันบนกันและกัน ทั้งนี้ขึ้นอยู่กับประเภทแผนภูมิแท่ง แผนภูมิต่อไปนี้แสดงแผนภูมิแท่งที่มีการจัดกลุ่มซึ่งมี 2 ชุด ชุดหนึ่งเป็นสีน้ำเงินเข้มและสีฟ้าอ่อน
แผนภูมิแท่งแสดงชุด 2 ชุด ได้แก่ แมวและสุนัข
ป้ายกำกับแกน
ค่าตัวเลขหรือข้อความตลอดแกนแต่ละแกน ในแผนภูมิก่อนหน้านี้ ป้ายกำกับจะเป็น "ม.ค." "ก.พ." "มี.ค." "0," "50," "100"

องค์ประกอบของแผนภูมิ

องค์ประกอบบางอย่างของแผนภูมิมีดังนี้

ภูมิภาคต่างๆ ของแผนภูมิ
พื้นที่แผนภูมิ
พื้นที่แสดงปกซีรีส์ ดูรายละเอียดเพิ่มเติมได้ที่แถบด้านข้าง "องค์ประกอบของแผนภูมิ"
คำอธิบาย
พื้นที่เล็กๆ ในแผนภูมิที่อธิบายชุดหนังสือ ในแผนภูมิด้านบนคือส่วนที่แสดงคำว่า "แมว" และ "สุนัข"
พารามิเตอร์
คู่คีย์=ค่าที่ใช้ใน URL เช่น chxt=x โดยที่ chxt คือชื่อพารามิเตอร์ และ x คือค่าพารามิเตอร์
GETและGET
การส่ง URL แผนภูมิมี 2 วิธี โดยทั่วไปคำสั่ง GET จะทำได้โดยการพิมพ์ URL ในเบราว์เซอร์หรือทำให้เป็นแหล่งที่มาของแท็ก <img> คำขอ POST นั้นสร้างซับซ้อนกว่า แต่มีข้อมูลได้มากกว่า เหตุผลหลักในการใช้ POST แทน GET คือคำขอ POST อาจใช้อินเทอร์เน็ตได้มากกว่าคำขอ GET มาก (อักขระ 16,000 ตัวเทียบกับอักขระ 2,000 ตัว) ดูข้อมูล POST ได้ที่นี่
อักขระไปป์
อักขระ | ที่มักใช้เป็นพารามิเตอร์ ตัวคั่น คืออักขระที่ใช้แยกค่าหลายค่า คอมมาและเครื่องหมายและ (&) ยังใช้เป็นตัวคั่นใน URL ของแผนภูมิด้วย
แผนภูมิผสม
แผนภูมิที่ประกอบด้วยแผนภูมิ 2 ประเภทที่แตกต่างกัน เช่น แผนภูมิแท่งที่มีเส้น หรือแผนภูมิเส้นที่มีเครื่องหมายแท่งเทียน โปรดดูแผนภูมิผสม

กลับไปด้านบน

การเพิ่มประสิทธิภาพ

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

การใช้ POST

URL จะมีความยาวได้ไม่เกิน 2K ดังนั้นหากแผนภูมิมีข้อมูลมากกว่านั้น คุณจะต้องใช้ POST แทน GET ตามที่อธิบายไว้ที่นี่ GET คือเมื่อคุณพิมพ์ URL ของแผนภูมิลงในแถบ URL ของเบราว์เซอร์ หรือใช้เป็นแหล่งที่มาขององค์ประกอบ <img> ในหน้าเว็บ POST ต้องใช้การเขียนโปรแกรมเพิ่มเติมในภาษาอื่น เช่น PHP หรือ PERL

การสร้างแผนภูมิใน JavaScript

คุณใช้ Google Visualization API เพื่อสร้างแผนภูมิรูปภาพให้คุณได้ Google Visualization API คือ API แบบ JavaScript ที่มีเครื่องมือในการสร้าง กรอง และจัดการข้อมูล หรือค้นหาข้อมูลใน Google สเปรดชีตหรือเว็บไซต์อื่นๆ คุณสามารถใช้ Visualization API เพื่อสร้างข้อมูล จากนั้นเรียกใช้ Image Charts API เพื่อแสดงผลแผนภูมิในหน้าได้ ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบแผนภูมิรูปภาพทั่วไป หรือดูแผนภูมิ Google ที่มีการทำเครื่องหมาย (รูปภาพ) ในแกลเลอรีการแสดงภาพ