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

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

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

סקירה כללית

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

הערה למפתחים: בשל הגדרות האבטחה של Flash, ייתכן שהתצורה הזו (וכל הרכיבים החזותיים מבוססי ה-Flash) לא יפעלו כראוי כאשר הגישה אליה מתבצעת ממיקום קובץ בדפדפן (למשל, file:///c:/webhost/myhost/myviz.html) ולא מכתובת אתר של שרת אינטרנט (לדוגמה, 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);

פורמט נתונים

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

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

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

פותחים תרשים עבודה וקובעים את ההגדרות שרוצים לצלם. ההגדרות שניתן לציין כוללות רמות שקיפות, שינוי מרחק מהתצוגה והתאמה לליניארי של קנה מידה.
פותחים את חלונית ההגדרות בלחיצה על סמל מפתח הברגים בפינה השמאלית התחתונה של התרשים.
לוחצים על הקישור מתקדם בפינה הימנית התחתונה כדי להוסיף את החלונית מתקדם לקבוצה.
מרחיבים את החלונית מתקדם ומעתיקים את התוכן של תיבת הטקסט מצב ללוח. (הערה: במקום להשתמש בתפריט, שמתואר בשלבים 2 עד 4, אפשר להוסיף לחצן בדף שמתקשר אל getState() ומציג את המצב הנוכחי בתיבת הודעה).
צריך להקצות את מחרוזת המצב שהעתקת בשלב הקודם לפרמטר האפשרויות "state" בקוד, כפי שמוצג כאן. כשהוא מועבר לשיטת 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	רוחב התרשים בפיקסלים.
מדינה	string	ללא	מצב תצוגה ראשוני של התרשים. זהו אובייקט JSON בהמשכים המתאר את המרחק מהתצוגה, המאפיינים שנבחרו, הבועות/ישויות שנבחרו ותיאורים אחרים של מצבים. למידע נוסף על הגדרת הערכים, אפשר לעיין בקטע הגדרת מצב ראשוני.
הצגת תרשימים	boolean	נכון	false מסתיר את הלחצנים ששולטים בסוג התרשים (בועות / קווים / עמודות) בפינה השמאלית העליונה.
כותרת עליונה	boolean	נכון	הערך false מסתיר את תווית הכותרת של הישויות (הנגזרת מהתווית של העמודה הראשונה בטבלת הנתונים).
ShowSelectListComponent	boolean	נכון	הערך false מסתיר את רשימת הישויות הגלויות.
ShowSidePanel	boolean	נכון	הערך false מסתיר את החלונית השמאלית.
ShowXMetricבורר	boolean	נכון	false מסתיר את בוחר הערכים עבור x.
ShowYMetric Picker	boolean	נכון	false מסתיר את בוחר הערכים עבור y.
ShowXScaleבורר	boolean	נכון	false מסתיר את בוחר הסולם עבור x.
ShowYScalepicker	boolean	נכון	false מסתיר את בוחר הסולם עבור y.
הצגת תוכנית AdvancedPanel	boolean	נכון	הערך false משבית את תא האפשרויות בחלונית ההגדרות.

שיטות

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

אירועים

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

מדיניות נתונים

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

הערות

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