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

เกริ่นนำ

มาตรฐาน 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 ซึ่งเทียบเท่ากับแอตทริบิวต์ shape ของแท็ก <area>
  • coords - อาร์เรย์ตัวเลขที่อธิบายพื้นที่ เทียบเท่ากับแอตทริบิวต์ coords ของแท็ก <area>