אירועי הפעלה

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

לכל תצוגה חזותית מוגדרים אירועים משלה, ומסמכי התיעוד של התצוגה החזותית צריכים לתאר מתי כל אירוע מופעל, מה המשמעות שלו ואיזה מידע הוא שולח אל הגורם המטפל באירועים (לדוגמה, בהמחשה חזותית של תרשים ארגוני). בדף הזה נסביר איך יוצרים של רכיבים חזותיים יכולים להפעיל אירועים. בדף טיפול באירועים מוסבר איך לקוחות יכולים להירשם לקבלת אירועים.

יש אירוע אחד שצריך להפעיל כל תצוגה חזותית שניתן לבחור: האירוע שנבחר. עם זאת, ההתנהגות והמשמעות של האירוע הזה מוגדרות על ידי כל תצוגה חזותית.

אם התצוגה החזותית לא מוכנה לאינטראקציה מיד אחרי שהשיטה draw מחזירה למשתמש את השליטה, התצוגה החזותית צריכה לפעול: האירוע המוכן. ההתנהגות והמשמעות המדויקות של האירוע הזה מוגדרות בקטע האירוע המוכנות.

חשוב לציין שאירועיVisual API הם נפרדים ונפרדים מאירועי ה-DOM הרגילים.

תוכן עניינים

  1. הפעלת אירוע
  2. האירוע שנבחר
  3. אירוע המוכנות
  4. מידע נוסף

הפעלת אירוע

כדי להפעיל אירוע מהתצוגה החזותית, צריך להפעיל את הפונקציה google.visualization.events.trigger(). הפונקציה מצפה לפרמטרים הבאים:

  1. התרשים להמחשת המקור (בדרך כלל זהו הערך this).
  2. שם האירוע (מחרוזת).
  3. פרטי האירוע (אובייקט). מפה אופציונלית (שם/ערך) של פרטי אירוע ספציפי.

הדוגמה הבאה מראה איך תצוגה חזותית מקפיצה את האירוע שנבחר: 

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Fire a select event.
  google.visualization.events.trigger(this, 'select', {});
};

דפים מתארחים יכולים להירשם לקבלת האירועים שלך בטלפון google.visualization.events.addListener() או google.visualization.events.addOneTimeListener(). חשוב לתעד באופן יסודי את כל האירועים שאתם מפעילים.

בחירת האירוע

האירוע 'select' (בחירה) הוא אירוע רגיל שמופעל על ידי הרבה המחשות ויזואליות בתגובה ללחיצה של המשתמש על העכבר. אם בחרת להפעיל אירוע בתגובה לקליקים על העכבר, עליך להטמיע את האירוע "select" באופן הרגיל המתואר כאן:

  1. מפעילים אירוע בשם 'select' כשהמשתמש בוחר נתונים בתצוגה החזותית. האירוע לא שולח ארגומנטים לפונקציות ההאזנה.
  2. חושפים את השיטה getSelection() כפי שמתואר בקטע המסמך המקושר. השיטה הזו אמורה להחזיר את האינדקסים של רכיבי data שהמשתמש בחר.
  3. חושפים method setSelection() כפי שמתואר בקטע הפניה. מידע נוסף על טיפול באירועים זמין גם בדף טיפול באירועים.

האירוע של מצב מוכנות

כל תצוגה חזותית צריכה להפעיל אירוע "מוכן" שפועל באופן רגיל כדי ליידע את המפתח מתי התצוגה החזותית מוכנה לעיבוד שנקרא methods. (עם זאת, אין דרישה מוחלטת לכך שהתצוגה החזותית תפעל בצורה כזו; כדאי לבדוק את התיעוד עבור התצוגה החזותית).

באופן כללי, רכיבים חזותיים שחושפים את האירוע Ready (מוכן) מעוצבים לפי המפרטים הבאים:

  • האירוע המוכן לא מעביר מאפיינים ל-handler (ה-handler של הפונקציה לא אמור לצפות שפרמטרים כלשהם יועברו אליו).
  • התצוגה החזותית אמורה להפעיל את האירוע המוכן אחרי שהתצוגה החזותית מוכנה לאינטראקציה. אם השרטוט של התצוגה החזותית הוא אסינכרוני, חשוב שהאירוע יופעל כשניתן לקרוא בפועל ל-methods של אינטראקציה, ולא רק כשה-method draw מסתיימת.
  • צריך להוסיף אוזן לאירוע הזה לפני קריאה ל-method draw, כי אחרת, יכול להיות שהאירוע יופעל לפני הגדרת המאזינים, והוא לא יוקלט.
  • אם תקראו ל-methods לפני הפעלת האירוע המוכן, תוכלו להשתמש בשיטות האלה כדי למנוע מצב שבו הן יפעלו כמו שצריך.

המוסכמה היא שתצוגות חזותיות שלא מפעילות אירוע "מוכן" מוכנות לאינטראקציה מיד אחרי שה-method draw מסתיימת ומחזירה את הבקרה למשתמש.

מידע נוסף