אירועי ירי

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

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

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

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

חשוב לציין שאירועי ה-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" באופן הרגיל המתואר כאן:

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

האירוע מוכן

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

באופן כללי, המחשות חזותיות שחושפות את האירוע "מוכנות" מיועדות למפרטים הבאים:

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

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

מידע נוסף