เกริ่นนำ
มาตรฐาน HTML ช่วยให้คุณระบุฮอตสปอตในรูปภาพหน้าเว็บได้โดยใช้แผนที่รูปภาพ ฮอตสปอตเหล่านี้สามารถใช้เพื่อแสดงข้อความโฮเวอร์หรือทำหน้าที่เป็นลิงก์ หรือคุณจะเพิ่มการจัดการเหตุการณ์ JavaScript เพื่อเปิดใช้การโต้ตอบก็ได้ เช่น วางเมาส์เหนือแถบและป้ายกำกับแกนของรูปภาพต่อไปนี้
ฮอตสปอตเหล่านี้สร้างขึ้นโดยใช้องค์ประกอบ HTML <map>
และ <area>
Chart API สามารถแสดงพิกัดทั้งหมดที่จำเป็นต่อการสร้างแผนที่ฮอตสปอตของแผนภูมิดังกล่าว ตามที่อธิบายถัดไป
การสร้างแผนที่สำหรับแผนภูมิของคุณ
หากเพิ่มพารามิเตอร์ chof=json
ลงใน URL ของแผนภูมิ คุณจะได้รับสตริง JSON ที่มีข้อมูลทั้งหมดที่จําเป็นในการสร้างการแมปรูปภาพสําหรับแผนภูมิ จากนั้นก็เพิ่มลิงก์ไปยังส่วนที่เฉพาะเจาะจงของแผนภูมิ หรือแนบฟังก์ชัน JavaScript กับกิจกรรมการคลิกเพื่อให้แผนภูมิโต้ตอบได้มากขึ้น โปรดทราบว่าแผนภูมิบางประเภทไม่รองรับวิธีนี้ โปรดดูรายละเอียดในเอกสารประกอบของแผนภูมิเฉพาะ
เครื่องมือในหน้านี้จะช่วยคุณสร้าง HTML สำหรับแผนที่รูปภาพ คุณสามารถฝัง HTML นี้ในหน้าเว็บของคุณได้อย่างถาวร หรือจะคัดลอกโค้ดของเราไปยังหน้าเว็บของคุณ แล้วส่งคำขอและสร้างแผนที่ได้ทันที หากหน้าเว็บของคุณอนุญาตให้ผู้ใช้เปลี่ยนแปลงแผนที่ในหน้าเว็บแบบไดนามิกได้
วิธีใช้เครื่องมือนี้ในการสร้างแผนที่
- รับเอาต์พุต JSON สำหรับแผนภูมิ: เพิ่ม
chof=json
ลงใน URL ของแผนภูมิ เรียกดู URL นั้นในเบราว์เซอร์ แล้วคัดลอกข้อความที่แสดงผล - วางข้อความ JSON ที่คุณคัดลอกลงในกล่องข้อความด้านล่างที่มีเครื่องหมาย "เอาต์พุต JSON" แล้วคลิก "สร้างแผนที่"
- วางโค้ดแผนที่ที่สร้างขึ้นลงในหน้าเว็บ
- อัปเดตโค้ดที่สร้างขึ้นด้วยชื่อที่ไม่ซ้ำกันสำหรับองค์ประกอบ
<map>
- นำองค์ประกอบแผนที่ที่ไม่จำเป็นออก (เช่น แท่ง ชิ้นส่วน ป้ายกำกับ หรือองค์ประกอบแกนที่ต้องการ)
- อัปเดตแอตทริบิวต์ href ในองค์ประกอบ
<area>
ที่สร้างขึ้น - เพิ่มแอตทริบิวต์
usemap="#MAP_NAME"
ลงในองค์ประกอบ<img>
โดยแทนที่ชื่อแผนที่สำหรับMAP_NAME
สำคัญ: โปรดใส่ "#" ไว้ด้านหน้าค่า usemap เช่น
usemap="#mymap"
ในกรณีนี้ ชื่อแผนที่คือ "mymap" ไม่ใช่ "#mymap"
รูปแบบของสตริง JSON
รูปแบบของ JSON ที่แสดงผลเมื่อคุณระบุ chof=json
มีดังนี้
- วัตถุรากชื่อ chartshape ออบเจ็กต์นี้เก็บอาร์เรย์ของออบเจ็กต์ โดยแต่ละแบบจะแสดงพื้นที่ 1 แห่งในแผนที่รูปภาพของแผนภูมิ แต่ละออบเจ็กต์จะมีพร็อพเพอร์ตี้ต่อไปนี้
- name - ชื่อสําหรับพื้นที่ที่เจาะจงนี้ รูปแบบการตั้งชื่อทั่วไปคือ elementtype_series#_item# เช่น bar0_0 สำหรับพื้นที่ที่อธิบายแถบแรกในชุดแรก หรือแกน 0_1 สำหรับพื้นที่ที่อธิบายป้ายกำกับแกนที่ 2 บนแกน x
- type - รูปร่างของพื้นที่นี้ ซึ่งจะเป็นค่าใดค่าหนึ่งต่อไปนี้ ทั้งนี้ขึ้นอยู่กับประเภทของแผนภูมิ ซึ่งได้แก่ RECT, CIRCLE หรือ POLY ซึ่งเทียบเท่ากับแอตทริบิวต์รูปร่างของแท็ก
<area>
- coords - อาร์เรย์ตัวเลขที่อธิบายพื้นที่ ซึ่งเทียบเท่ากับแอตทริบิวต์ coords ของแท็ก
<area>