יצירת מפת תמונה של תרשים

מבוא

תקני ה-HTML מאפשרים לציין נקודות לשיתוף אינטרנט בתמונה של דף אינטרנט באמצעות מפת תמונה. אפשר להשתמש בנקודות החמות האלה כדי להציג טקסט מרחף או כקישורים, או אפילו להוסיף טיפול באירועים של JavaScript כדי לאפשר אינטראקטיביות. לדוגמה, מעבירים את העכבר מעל לעמודות ולתוויות הצירים של התמונה הבאה:

 

הנקודות החמות האלה נוצרות באמצעות רכיבי ה-HTML <map> ו-<area>. Chart API יכול להחזיר את כל הקואורדינטות הדרושות ליצירת מפה של נקודות פופולריות, כפי שמתואר בהמשך.

יצירת מפה לתרשים שלך

אם מוסיפים את הפרמטר chof=json לכתובת ה-URL של התרשים, מקבלים מחרוזת JSON שכוללת את כל הנתונים הדרושים כדי ליצור מפת תמונה לתרשים. לאחר מכן אפשר להוסיף קישורים לקטעים ספציפיים בתרשים, או לצרף פונקציות JavaScript כדי ללחוץ על אירועים ולהפוך את התרשים לאינטראקטיבי יותר. הערה: לא כל סוגי התרשימים תומכים בכך. אפשר לקבל פרטים נוספים במסמכי התיעוד הספציפיים של התרשימים.

הכלי שבדף הזה יעזור לכם ליצור קוד HTML למפת תמונה. ניתן להטמיע את ה-HTML הזה בדף באופן קבוע, או אפילו להעתיק את הקוד שלנו לדף שלך ואז לבקש את המפה וליצור אותה תוך כדי תנועה, אם הדף מאפשר למשתמש לשנות את המפה שבדף באופן דינמי.

כך משתמשים בכלי כדי ליצור מפה:

1. קבלת פלט ה-JSON של התרשים: מוסיפים את הערך chof=json לכתובת ה-URL של התרשים, מעיינים בכתובת ה-URL הזו בדפדפן ומעתיקים את הטקסט שהוחזר.
2. מדביקים את טקסט ה-JSON שהעתקתם בתיבת הטקסט שלמטה עם הסימון 'JSON Output', ולוחצים על 'Make Map'.
3. מדביקים בדף את קוד המפה שנוצר
4. יש לעדכן את הקוד שנוצר בשם ייחודי עבור הרכיב <map>.
5. מסירים רכיבים במפה שאין לכם צורך בהם (כמו עמודות, פרוסות, תוויות או רכיבי ציר ספציפיים).
6. עדכון מאפייני href ברכיבי <area> שנוצרו.
7. מוסיפים את המאפיין usemap="#MAP_NAME" לרכיב <img> (במקום MAP_NAME מופיע שם המפה).

   חשוב: יש להקפיד להוסיף '#' לפני הערך של ה-usemap. לדוגמה: usemap="#mymap". במקרה זה, שם המפה הוא "mymap" ולא "#mymap".

 

הפורמט של מחרוזת ה-JSON

זהו הפורמט של קובץ ה-JSON שמוחזר כשמציינים את chof=json:

• אובייקט בסיס שנקרא chartshape. האובייקט הזה מכיל מערך של אובייקטים, שכל אחד מהם מייצג אזור אחד במפת תמונה של התרשים. לכל אובייקט יש את המאפיינים הבאים:
  • name - שם לאזור הספציפי הזה. המוסכמה הכללית למתן שמות היא elementtype_series#_item#. לדוגמה: bar0_0 לאזור שמתאר את העמודה הראשונה בסדרה הראשונה, או ציר0_1 לאזור שמתאר את תווית הציר השני בציר ה-X.
  • type - הצורה של האזור הזה. הערך יהיה אחד מהערכים הבאים, בהתאם לסוג התרשים: RECT , CIRCLE או POLY. מאפיין זה זהה למאפיין shape של התג <area>.
  • coords - מערך מספרי שמתאר את האזור, שווה ערך למאפיין coords של התג <area>.