การสร้างแผนผังรูปภาพแผนภูมิ

เกริ่นนำ

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

ฮอตสปอตเหล่านี้สร้างขึ้นโดยใช้องค์ประกอบ HTML <map> และ <area> Chart API สามารถแสดงพิกัดทั้งหมดที่จำเป็นต่อการสร้างแผนที่ฮอตสปอตของแผนภูมิดังกล่าว ตามที่อธิบายถัดไป

การสร้างแผนที่สำหรับแผนภูมิของคุณ

หากเพิ่มพารามิเตอร์ chof=json ลงใน URL ของแผนภูมิ คุณจะได้รับสตริง JSON ที่มีข้อมูลทั้งหมดที่จําเป็นในการสร้างการแมปรูปภาพสําหรับแผนภูมิ จากนั้นก็เพิ่มลิงก์ไปยังส่วนที่เฉพาะเจาะจงของแผนภูมิ หรือแนบฟังก์ชัน JavaScript กับกิจกรรมการคลิกเพื่อให้แผนภูมิโต้ตอบได้มากขึ้น โปรดทราบว่าแผนภูมิบางประเภทไม่รองรับวิธีนี้ โปรดดูรายละเอียดในเอกสารประกอบของแผนภูมิเฉพาะ

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

วิธีใช้เครื่องมือนี้ในการสร้างแผนที่

1. รับเอาต์พุต JSON สำหรับแผนภูมิ: เพิ่ม chof=json ลงใน URL ของแผนภูมิ เรียกดู URL นั้นในเบราว์เซอร์ แล้วคัดลอกข้อความที่แสดงผล
2. วางข้อความ JSON ที่คุณคัดลอกลงในกล่องข้อความด้านล่างที่มีเครื่องหมาย "เอาต์พุต JSON" แล้วคลิก "สร้างแผนที่"
3. วางโค้ดแผนที่ที่สร้างขึ้นลงในหน้าเว็บ
4. อัปเดตโค้ดที่สร้างขึ้นด้วยชื่อที่ไม่ซ้ำกันสำหรับองค์ประกอบ <map>
5. นำองค์ประกอบแผนที่ที่ไม่จำเป็นออก (เช่น แท่ง ชิ้นส่วน ป้ายกำกับ หรือองค์ประกอบแกนที่ต้องการ)
6. อัปเดตแอตทริบิวต์ href ในองค์ประกอบ <area> ที่สร้างขึ้น
7. เพิ่มแอตทริบิวต์ 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>