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

  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, והאפשרות displayAnnotations מוגדרת כ-True, לעמודה הזו תהיה כותרת קצרה שמתארת את הנקודה הזו. לדוגמה: אם הקו הזה מייצג את הטמפרטורה בברזיל, והנקודה הזו היא מספר גבוה מאוד, השם יכול להיות 'היום החם ביותר בתיעוד'.
    • טקסט ההערה - [מחרוזת אופציונלית] אם קיימת מחרוזת שנייה לסדרה הזו, ערך התא ישמש כטקסט תיאורי נוסף לנקודה הזו. כדי להשתמש בעמודה הזו צריך להגדיר את האפשרות displayAnnotations כ-True. אפשר להשתמש בתגי HTML אם מגדירים את allowHtml לערך true. בעיקרון אין מגבלת גודל, אבל חשוב לזכור שרשומות ארוכות מדי עלולות לגלוש בקטע התצוגה. העמודה הזו לא חייבת להופיע גם אם יש עמודה של כותרת הערה לנקודה הזו. התרשים לא משתמש בתווית העמודה. לדוגמה, אם זה היה היום החם ביותר בנקודת השיא, אפשר לומר משהו כמו "היום הקרוב ביותר היה קר יותר ב-10 מעלות!".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כשמציגים יותר מסולם אחד, מומלץ להגדיר את האפשרות scaleType כ-allfixed' או כ'allmaximized'.

scaleType string 'קבוע'

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

  • 'maximized' - ציר ה-Y יכסה את המינימום לערכים המקסימליים של הסדרה. אם יש לכם יותר מסדרה אחת, השתמשו ב-allmax.
  • 'fixed' [default] – ציר ה-Y משתנה בהתאם לערכי הנתונים:
    • אם כל הערכים גדולים יותר מ-0, ציר ה-Y יכסה בין אפס לערך הנתונים המקסימלי.
    • אם כל הערכים גדולים מ-0, ציר ה-Y יכסה בין אפס לערך הנתונים המינימלי.
    • אם הערכים הם חיוביים וגם שליליים, ציר ה-Y ינוע בין המקסימום של הסדרה לבין המינימום בסדרה.

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

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

שיטות

שיטה סוג הערך המוחזר תיאור
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 מתייחס לסדרת הנתונים הראשונה וכן הלאה.

אירועים

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

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

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

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

הערות

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