דף זה תורגם על ידי Cloud Translation API.

תצוגה חזותית: תרשים תנועה

סקירה כללית
דוגמה
בטעינה
הגדרת מצב התחלתי
פורמט נתונים
אפשרויות הגדרה
שיטות
אירועים
המדיניות בנושא נתונים
Notes

סקירה כללית

תרשים דינמי לבחינת מספר אינדיקטורים לאורך זמן. התרשים מעובד בתוך הדפדפן באמצעות Flash.

הערה למפתחים: בגלל הגדרות האבטחה של Flash, יכול להיות שההגדרה הזו (וכל הרכיבים החזותיים שמבוססים על Flash) לא יפעלו בצורה תקינה כשניגשים אליהם ממיקום של קובץ בדפדפן (למשל, file:///c:/webhost/myhost/myviz.html) ולא מכתובת URL של שרת אינטרנט (למשל, http://www.myhost.com/myviz.html). בדרך כלל מדובר בבעיה בבדיקה בלבד. ניתן להתגבר על הבעיה הזו כפי שמתואר באתר האינטרנט של Adobe.

דוגמה

(לתשומת ליבכם: הקוד הבא לא יפעל כשהוא טעון כקובץ מקומי. צריך לטעון אותו משרת אינטרנט).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

בטעינה

שם החבילה של google.charts.load הוא "motionchart".

  google.charts.load('current', {'packages': ['motionchart']});

שם הכיתה של התצוגה החזותית הוא google.visualization.MotionChart.

  var visualization = new google.visualization.MotionChart(container);

פורמט נתונים

העמודה הראשונה חייבת להיות מסוג 'string' ולהכיל את שמות הישויות (למשל, 'תפוחים', 'תפוזים', 'בננות' בדוגמה שלמעלה).
העמודה השנייה חייבת להכיל ערכי זמן. אפשר לציין את השעה בכל אחד מהפורמטים הבאים:
- Year – סוג העמודה: 'number'. דוגמה: 2008.
- Month, day and year – סוג העמודה: 'date'. הערכים צריכים להיות JavaScript מסוג Date.
- מספר השבוע – סוג העמודה: 'string'; הערכים צריכים להיות בתבנית YYYYWww, שתואמת ל-ISO 8601. דוגמה: '2008W03'.
- Quarter – סוג העמודה: 'string'. הערכים צריכים להיות בתבנית YYYYQq, שתואמת לתקן ISO 8601. דוגמה: '2008Q3'.
עמודות עוקבות יכולות להיות מסוג 'number' או 'string' עמודות המספרים יופיעו בתפריטים הנפתחים של הצירים X ו-Y, צבע וגודל. העמודות של מחרוזות יופיעו רק בתפריט הנפתח של Color (צבע). אפשר לראות דוגמה למעלה.

הגדרת מצב התחלתי

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

פותחים תרשים עבודה וקובעים את ההגדרות שרוצים לתעד. ההגדרות שאפשר לציין כוללות רמות אטימות, שינוי מרחק התצוגה והגדלה של היומן לעומת התאמה ליניארית.
כדי לפתוח את חלונית ההגדרות, לוחצים על סמל מפתח הברגים בפינה השמאלית התחתונה של התרשים.
לוחצים על הקישור מתקדם בפינה הימנית התחתונה כדי להוסיף את החלונית מתקדם לקבוצה.
מרחיבים את החלונית Advanced ומעתיקים את התוכן של תיבת הטקסט State ללוח. (הערה: במקום להשתמש בתפריט, שמתואר בשלבים 2 עד 4, אפשר להוסיף לדף לחצן שקורא ל-getState() ומציג את המצב הנוכחי בתיבת הודעות).
מקצים את מחרוזת המצב שהעתקתם בשלב הקודם לפרמטר האפשרויות 'state' בקוד, כמו שמוצג כאן. כשמעבירים את התרשים ל-method draw(), התרשים יאתחל למצב שצוין במהלך ההפעלה.

var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

אפשרויות הגדרה

שם	סוג	ברירת המחדל	תיאור
גובה	number	300	גובה התרשים בפיקסלים.
רוחב	number	500	רוחב התרשים בפיקסלים.
state	string	ללא	מצב תצוגה ראשוני של התרשים. זהו אובייקט JSON שעבר סריאליזציה, שמתאר את רמת הזום, את המאפיינים שנבחרו, הבועות/ישויות שנבחרו ותיאורי מצבים אחרים. כדי ללמוד איך להגדיר זאת, ראו הגדרת מצב התחלתי.
showChartButtons	boolean	true	false מסתיר את הלחצנים שקובעים את סוג התרשים (בועות / קווים / עמודות) בפינה הימנית העליונה.
showHeader	boolean	true	false מסתיר את תווית הכותרת של הישויות (הנגזרת מהתווית של העמודה הראשונה בטבלת הנתונים).
showSelectListComponent	boolean	true	false מסתיר את רשימת הישויות הגלויות.
showSidePanel	boolean	true	false מסתיר את החלונית הימנית.
showXMetricPicker	boolean	true	false מסתיר את בורר המדדים עבור x.
showYMetricPicker	boolean	true	false מסתיר את בורר המדדים עבור y.
showXScalePicker	boolean	true	false מסתיר את בוחר קנה המידה של x.
showYScalePicker	boolean	true	false מסתיר את בוחר קנה המידה ב-y.
showAdvancedPanel	boolean	true	false משבית את תא האפשרויות בחלונית ההגדרות.

שיטות

שיטה	סוג הערך המוחזר	תיאור
`draw(data, options)`	אין	מציירות את התרשים עם האפשרויות הזמינות.
`getState()`	string	מחזירה את state הנוכחי של תרשים התנועה, שעבר סריאליזציה למחרוזת JSON. כדי להקצות את המצב הזה לתרשים, צריך להקצות את המחרוזת הזו לאפשרות `state` בשיטה `draw()`. בדרך כלל משתמשים באפשרות הזו כדי לציין מצב תרשים מותאם אישית במהלך ההפעלה, במקום להשתמש במצב ברירת המחדל.

אירועים

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

המדיניות בנושא נתונים

כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא נשלחים נתונים לאף שרת.

הערות

בגלל הגדרות האבטחה של Flash, יכול להיות שהתכונה הזו (וכל התצוגות החזותיות שמבוססות על Flash) לא יפעלו כראוי כשניגשים אליה ממיקום קובץ בדפדפן (למשל, file:///c:/webhost/myhost/myviz.html) ולא מכתובת URL של שרת אינטרנט (למשל http://www.myhost.com/myviz.html). בדרך כלל מדובר בבעיה לבדיקה בלבד. אפשר להתגבר על הבעיה הזו כמו שמתואר באתר האינטרנט של Macromedia.