ציר זמן עם הערות

  1. סקירה כללית
  2. דוגמה
  3. בטעינה
  4. פורמט נתונים
  5. אפשרויות הגדרה
  6. שיטות
  7. אירועים
  8. מדיניות נתונים
  9. Notes

סקירה כללית

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

מעכשיו, בציר הזמן של ההערות משתמשים בתרשימי הערות באופן אוטומטי.

דוגמה

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>
  </body>
</html>

חשוב: כדי להשתמש בהצגה החזותית הזו, צריך לציין את הגובה והרוחב של אלמנט המאגר באופן מפורש בדף. לדוגמה: <div id="chart_div" style="width:400; height:250"></div>.

בטעינה

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

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

שם הכיתה הוא google.visualization.AnnotatedTimeLine

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

פורמט נתונים

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

  • העמודה הראשונה היא מסוג date או datetime, והיא מציינת את ערך ה-X של הנקודה בתרשים. אם העמודה הזו היא מסוג date (ולא datetime), רזולוציית הזמן הקטנה ביותר בציר ה-X תהיה יום אחד.
  • כל שורת נתונים מתוארת באמצעות קבוצה של עמודות נוספות עם שלוש עמודות נוספות, כמתואר כאן:
    • Y value - [Required, Number] העמודה הראשונה בכל קבוצה מתארת את ערך השורה בזמן המתאים מהעמודה הראשונה. תווית העמודה מוצגת בתרשים ככותרת של השורה הזו.
    • כותרת ההערה – [אופציונלי, מחרוזת] אם עמודת מחרוזת מופיעה אחרי עמודת הערך, והאפשרות displayAnnotations נכונה, העמודה הזו מכילה כותרת קצרה שמתארת את הנקודה הזו. לדוגמה, אם הקו הזה מייצג טמפרטורה בברזיל, והנקודה הזו גבוהה מאוד, הכותרת יכולה להיות 'היום החם ביותר ברשומות'.
    • טקסט רישום - [מחרוזת אופציונלית] אם קיימת עמודת מחרוזת שנייה עבור הסדרה הזו, ערך התא ישמש כטקסט תיאורי נוסף עבור הנקודה הזו. צריך להגדיר את האפשרות displayAnnotations כ-True כדי להשתמש בעמודה הזו. אפשר להשתמש בתגי HTML, אם מגדירים את הערך allowHtml לערך true; באופן כללי, אין מגבלת גודל, אבל חשוב לשים לב שרשומות ארוכות מדי עלולות להעמיס על קטע התצוגה. אין צורך לכלול את העמודה הזו גם אם יש לכם עמודת כותרת להערה. לא נעשה שימוש בתווית העמודה בתרשים. לדוגמה, אם זה היה היום החם ביותר בנקודת שיא, יכול להיות שאמרת משהו כמו "היום הבא הכי קרוב ב-10 מעלות!".

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

שם סוג ברירת מחדל תיאור
allowHtml boolean לא נכון אם היא מוגדרת כ-True, טקסט כלשהו של הערות הכולל תגי HTML יוצג כ-HTML.
AllowRedraw boolean לא נכון

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

  • הערך חייב להיות נכון
  • הערות לרשת המדיה חייבות להיות שקריות (כלומר, לא ניתן להציג הערות)
  • עליך להעביר את אותן אפשרויות וערכים זהים (למעט אלה שאפשר להשתמש בהם ב-AllowRedraw ובהערות לתצוגה) כמו בשיחה הראשונה ל-draw().
allValuesSuffix string ללא סיומת שתתווסף לכל הערכים בסולם ובמקרא.
רוחב תווים number 25 הרוחב (באחוזים) של אזור ההערות, מחוץ לאזור התרשים כולו. חייב להיות מספר בטווח 5-80.
צבעים מערך מחרוזות צבעי ברירת מחדל הצבעים שיש להשתמש בהם בקווי התרשים ובתוויות. מערך של מחרוזות. כל רכיב הוא מחרוזת בפורמט צבע HTML חוקי. לדוגמה 'אדום' או ' #00cc00'.
dateformat string האפשרויות הבאות הן 'MMMM dd, yyyy' או 'HH:mm MMMM dd, yyyy', בהתאם לסוג העמודה הראשונה (תאריך או תאריך ושעה, בהתאמה). הפורמט המשמש להצגת פרטי התאריך בפינה השמאלית העליונה. הפורמט של השדה הזה נקבע באמצעות המחלקה Java SimpleDateFormat.
הצגת הערות boolean לא נכון אם המדיניות מוגדרת כ-True, התרשים יציג הערות מעל הערכים שנבחרו. כשאפשרות זו מוגדרת כ-True, לאחר כל עמודה מספרית ניתן להוסיף שתי עמודות אופציונליות של מחרוזות הערות, אחת לכותרת ההערה ואחת לטקסט של ההערה.
מסנן 'הערות' boolean לא נכון אם המדיניות מוגדרת כ-True, תרשים יציג מסנן סינון כדי לסנן הערות. כדאי להשתמש באפשרות זו כשיש הרבה הערות.
displayDateBarמפריד boolean נכון האם להציג מפריד עמודה קטן ( | ) בין ערכי הסדרה לבין התאריך במקרא, כאשר true מציין כן.
displayExactValues boolean לא נכון קביעה אם להציג גרסה מקוצרת ומעוגלת של הערכים בחלק העליון של התרשים, כדי לחסוך מקום. הערך false מציין שכן, לדוגמה, אם הערך הוא false, ייתכן ש-56123.45 יוצג כ-56.12k.
DisplayLegendDots boolean נכון מציינת אם להציג נקודות לצד הערכים בטקסט המקרא, כאשר הערך true מציין כן.
displayLegendValues boolean נכון מציינת אם להציג את הערכים המודגשים במקרא, כאשר true מציין כן.
displayRangeSelector boolean נכון

קביעה אם להציג את האזור לבחירת טווח הזום (האזור שבתחתית התרשים), שבו הערך false מייצג את הערך 'לא'.

המתאר בבורר המרחק מהתצוגה הוא גרסה בקנה מידה של היומן מהסדרה האחרונה בתרשים, עם התאמה למידות של בורר המרחק מהתצוגה.
לחצנים ברשת המדיה boolean נכון בחירה אם להציג את קישורי הזום ("1d 5d 1m" וכו'), כאשר false מציין לא.
מילוי number 0 מספר בין 0 ל-100 (כולל) שמציין את האלפא של המילוי שמתחת לכל שורה בתרשים הקו. 100 פירושו 100% מילוי אטום, 0 פירושו שאין מילוי כלל. צבע המילוי יהיה זהה לזה של הקו שמעליו.
הדגשה string 'הקרוב ביותר'

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

  • 'הקרוב ביותר' - הערכים הקרובים ביותר לציר ה-X עם העכבר.
  • 'last' – קבוצת הערכים הבאה שמימין לעכבר.
מיקום האגדה string 'sameRow' האם למקם את המקרא הצבעוני באותה שורה עם לחצני הזום והתאריך ('sameRow'), או בשורה חדשה ('newRow').
מקסימלי number אוטומטי הערך המקסימלי להצגה בציר ה-Y. אם הערך המקסימלי של הנקודה בנתונים יחרוג מהערך הזה, המערכת תתעלם מההגדרה הזו והתרשים יותאם כדי להציג את סימן הווי הגדול הבא מעל נקודת הנתונים המקסימלית. הוא יקבל עדיפות על פני המספר המקסימלי של ציר Y שנקבע על ידי scaleType.
דק' number אוטומטי הערך המינימלי להצגה בציר ה-Y. אם ערך הנתונים המינימלי יהיה נמוך מהערך הזה, המערכת תתעלם מההגדרה הזו והתרשים יותאם כדי להציג את סימן הווי הגדול הבא מתחת לנקודת הנתונים המינימלית. הוא יקבל עדיפות על פני ערכי המינימום של ציר Y שייקבעו על ידי scaleType.
מספרי עיצוב מחרוזת, או מפה של מספר:צמדי מחרוזות אוטומטי

המדיניות מציינת את דפוסי המספרים שישמשו לעיצוב הערכים בראש התרשים.

הדפוסים צריכים להיות בפורמט שצוין על ידי סיווג java DecimalFormat.

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

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

קביעת הערכים שיוצגו בסימני הציר של ציר ה-Y בתרשים. הגדרת ברירת המחדל צריכה להיות סולם שמאלי בצד שמאל, שמתאים לשתי הסדרות. עם זאת, הצלעות השונות בתרשים יכולות להתאים לערכי הסדרות השונים.

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

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

כשמציגים יותר מסולם אחד, מומלץ להגדיר את האפשרות scaleType בסטטוס 'קבוע' או 'לכל היותר'.

קנה מידה string 'קבוע'

הגדרת הערכים המקסימליים והמינימליים שמוצגים בציר ה-Y. האפשרויות הבאות זמינות:

  • 'max.max' – ציר ה-Y יתפרס על ערכי המינימום המקסימליים של סדרת הרצף. אם יש לכם יותר מסדרת סדרות אחת, כדאי להשתמש בהגדרה 'מקסימום מקסימלי'.
  • 'קבוע' [ברירת מחדל] – ציר ה-Y משתנה בהתאם לערכים של ערכי הנתונים:
    • אם כל הערכים הם >=0, ציר ה-Y יתפרש מאפס עד לערך הנתונים המקסימלי.
    • אם כל הערכים הם <=0, ציר ה-Y יתפרש מאפס לעומת ערך הנתונים המינימלי.
    • אם הערכים חיוביים ושליליים, ציר ה-Y יהיה בטווח שבין סדרת המספרים המקסימליים למינימום בסדרה.

      אם מדובר בכמה סדרות, יש להשתמש בערך 'קבוע'.
  • 'allmaximized' - זהה ל'max.max', אבל משמש בעת הצגת קני מידה מרובים. שני התרשימים יחושבו באותו קנה המידה, ומשמעות הדבר היא שהתרשים יהיה מטעה עבור ציר ה-Y, אבל הצגת העכבר מעל כל סדרה תציג את הערך האמיתי שלה.
  • 'allfixed' - זהה ל-'fixed', אבל משמש כש מוצגים קני מידה שונים. ההגדרה הזו מתאימה את כל קנה המידה לסדרה שחלה עליה (יש להשתמש בה בשילוב עם scaleColumns).

אם מציינים את האפשרויות המינימום ו/או המקסימום, הן יקבלו עדיפות על פני ערכי המינימום והמקסימום שנקבעו לפי סוג קנה המידה.
עובי number 0 מספר בין 0 ל-10 (כולל) שמציין את עובי הקווים, כאשר 0 הוא הדק ביותר.
wmode, וומוד string 'חלון' הפרמטר מצב חלון (wmode) של תרשים ה-Flash. הערכים הזמינים הם: 'אטום', 'חלון' או 'שקוף'.
ZoomEndTime תאריך ללא הגדרת תאריך/שעת הסיום של טווח הזום שנבחר.
ZoomStartTime תאריך ללא הגדרת תאריך/שעת ההתחלה של טווח המרחק מהתצוגה שנבחר.

שיטות

‏Method סוג הערך המוחזר תיאור
draw(data, options) ללא משרטט את התרשים. כדי להאיץ את זמן התגובה בקריאה השנייה והאחרונה אל draw(), אפשר להשתמש במאפיין allowRedraw.
getSelection() מערך של רכיבי בחירה הטמעה רגילה של getSelection(). הרכיבים שנבחרו הם רכיבי תא. המשתמש יכול לבחור רק תא אחד בכל פעם.
getVisibleChartRange() אובייקט עם start ו-end מאפיינים הפונקציה מחזירה אובייקט עם מאפייני start ו-end, שכל אחד מהם הוא אובייקט Date שמייצג את בחירת הזמן הנוכחית.
hideDataColumns(columnIndexes) ללא הסתרה של סדרת הנתונים שצוינה בתרשים. מקבלת פרמטר אחד שיכול להיות מספר או מערך מספרים, שבו 0 מציין את סדרת הנתונים הראשונה וכן הלאה.
setVisibleChartRange(start, end) ללא מגדיר את הטווח הגלוי (זום) לטווח שצוין. ניתן להשתמש בשני פרמטרים מסוג Date שמייצגים את הפעם הראשונה והאחרונה בטווח התאריכים שנבחר שנבחר. יש להגדיר את הערך start כ-null כדי לכלול כל דבר, מהתאריך המוקדם ביותר ועד end. לאחר מכן יש להגדיר את הערך end לערך null כדי לכלול את כל הפרטים מהתאריכים start ועד התאריך האחרון.
showDataColumns(columnIndexes) ללא הצגת סדרת הנתונים שצוינה בתרשים, לאחר הסתרתם בשיטה hideDataColumns. מקבלת פרמטר אחד שיכול להיות מספר או מערך מספרים, שבו 0 מציין את סדרת הנתונים הראשונה וכן הלאה.

אירועים

שם תיאור נכסים
שינוי טווח טווח הזום השתנה. הופעל לאחר שהמשתמש שינה את טווח הזמן הגלוי, אך לא לאחר קריאה לשיטה setVisibleChartRange.
הערה: מומלץ לא להשתמש במאפייני האירוע, אלא לקבל אותם באמצעות קריאה לשיטה getVisibleChartRange.
  • start: תאריך. שעת ההתחלה של טווח הזום.
  • end: תאריך. שעת הסיום של טווח הזום.
למקומות התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים ושיטות השיחה אחרי שהוא משורטט, צריך להגדיר מאזין לאירוע הזה לפני שמתקשרים לשיטה draw ולהתקשר אליהן רק אחרי שהאירוע הופעל ללא
בחירה כשהמשתמש לוחץ על סימון הערה (סמן), נבחר התא המתאים בטבלת הנתונים. בשלב הזה, התצוגה החזותית מפעילה את האירוע הזה. ללא

הערה: עקב מגבלות מסוימות, ייתכן שאירועים לא יושלכו אם תיגשו לדף בדפדפן כקובץ (למשל, "file:// ") ולא משרת (למשל, "http://www").

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

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

הערות

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