תרשים הערה

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

סקירה כללית

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

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

דוגמה

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

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

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 600px;'></div>
  </body>
</html>

בטעינה

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

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

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

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

פורמט נתונים

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

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

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

שם
allowHtml

אם היא מוגדרת כ-True, כל טקסט ההערה שכולל תגי HTML יוצג כ-HTML.

סוג: בוליאני
ברירת מחדל: False
allValuesSuffix

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

סוג: מחרוזת
ברירת מחדל: אין
רוחב תווים

הרוחב (באחוזים) של אזור ההערות, מחוץ לאזור התרשים כולו. חייב להיות מספר בטווח שבין 5 ל-80.

סוג: מספר
ברירת מחדל: 25
צבעים

הצבעים שיש להשתמש בהם בקווי התרשים ובתוויות. מערך של מחרוזות. כל רכיב הוא מחרוזת בפורמט צבע HTML חוקי. לדוגמה 'אדום' או ' #00cc00'.

סוג: מערך של מחרוזות
ברירת מחדל: צבעי ברירת מחדל
dateformat

הפורמט המשמש להצגת פרטי התאריך בפינה השמאלית העליונה. הפורמט של השדה הזה צוין באמצעות סיווג Java SimpleDateFormat.

סוג: מחרוזת
ברירת מחדל: 'MMMM dd, yyyy' או 'HH:mm MMMM dd, yyyy', בהתאם לסוג העמודה הראשונה (תאריך או תאריך ושעה, בהתאמה).
הצגת הערות

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

סוג: בוליאני
ברירת מחדל: נכון
מסנן 'הערות'

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

סוג: בוליאני
ברירת מחדל: False
displayDateBarמפריד

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

סוג: בוליאני
ברירת מחדל: נכון
displayExactValues

מציינת אם להציג גרסה מקוצרת ומעוגלת של הערכים בחלק העליון של התרשים, כדי לחסוך במקום. הערך False מציין כך, למשל. אם המדיניות מוגדרת כ-False, 56123.45 עשויה להופיע כ-56.12k.

סוג: בוליאני
ברירת מחדל: False
DisplayLegendDots

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

סוג: בוליאני
ברירת מחדל: נכון
displayLegendValues

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

סוג: בוליאני
ברירת מחדל: נכון
displayRangeSelector

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

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

סוג: בוליאני
ברירת מחדל: נכון
לחצנים ברשת המדיה

בחירה אם להציג את לחצני הזום ("1d 5d 1m" וכו'), כאשר false מציין לא.

סוג: בוליאני
ברירת מחדל: נכון
מילוי

מספר בין 0 ל-100 (כולל) שמציין את האלפא של המילוי שמתחת לכל שורה בתרשים הקו. 100 פירושו 100% אטום ו-0 פירושו שאין מילוי בכלל. צבע המילוי זהה לצבע של הקו שמופיע מעליו.

סוג: מספר
ברירת מחדל: 0
מיקום האגדה

האם למקם את המקרא הצבעוני באותה שורה עם לחצני הזום והתאריך ('sameRow'), או בשורה חדשה ('newRow').

סוג: מחרוזת
ברירת מחדל: 'sameRow'
מקסימלי

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

המספר הזה דומה ל-maxValue בתרשימים בסיסיים.

סוג: מספר
ברירת מחדל: אוטומטי
דק'

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

המספר הזה דומה ל-minValue בתרשימים בסיסיים.

סוג: מספר
ברירת מחדל: אוטומטי
מספרי עיצוב

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

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

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

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

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

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

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

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

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

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

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

סוג: מערך של מספרים
ברירת מחדל: אוטומטי
שינוי פורמט

תבנית מספר לשימוש עבור תוויות השנתות בציר. ברירת המחדל של '#' מוצגת כמספר שלם.

סוג: מחרוזת
ברירת מחדל: '#'
קנה מידה

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

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

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

סוג: מחרוזת
ברירת מחדל: 'קבוע'
טבלה

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

var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
Type: אובייקט
ברירת מחדל: null
table.sortAscending

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

סוג: בוליאני
ברירת מחדל: False
table.sortColumn

אינדקס העמודה של טבלת ההערות שעבורה ימוינו ההערות. האינדקס צריך להיות 0, בעמודה של תווית ההערה, או 1 עבור העמודה טקסט של הערות.

סוג: מספר
ברירת מחדל: 0
עובי

מספר בין 0 ל-10 (כולל) שמציין את עובי הקווים, כאשר 0 הוא הדק ביותר.

סוג: מספר
ברירת מחדל: 0
ZoomEndTime

הגדרת תאריך/שעת הסיום של טווח הזום שנבחר.

סוג: תאריך
ברירת מחדל: אין
ZoomStartTime

הגדרת תאריך/שעת ההתחלה של טווח המרחק מהתצוגה שנבחר.

סוג: תאריך
ברירת מחדל: אין

שיטות

שיטה
clearChart()

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

סוג החזרה: אין
draw(data, options, state)

משרטט את התרשים.

סוג החזרה: אין
getContainer()

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

סוג החזרה: לטפל ברכיב DOM
getSelection()

הטמעה רגילה של getSelection(). הרכיבים שנבחרו הם רכיבים בתאים. המשתמש יכול לבחור רק תא אחד בכל פעם.

סוג החזרה: מערך של רכיבי בחירה
getVisibleChartRange()

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

סוג החזרה: אובייקט עם start ומאפייני end
hideDataColumns(columnIndexes)

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

סוג החזרה: אין
setVisibleChartRange(start, end)

מגדיר את הטווח הגלוי (זום) לטווח שצוין. ניתן להשתמש בשני פרמטרים מסוג Date שמייצגים את הפעם הראשונה והאחרונה בטווח התאריכים שנבחר שנבחר. מגדירים את הערך start לערך null כדי לכלול את כל הנתונים מהתאריך המוקדם ביותר ועד end. מגדירים את הערך end ל-null כדי לכלול את כל הפרטים מהתאריכים start ועד התאריך האחרון.

סוג החזרה: אין
showDataColumns(columnIndexes)

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

סוג החזרה: אין

אירועים

שם
rangechange

מופעל כשהמשתמש משנה את מחוון הטווח. נקודות הקצה החדשות לטווח יהיו זמינות בתור event['start'] ו-event['end']: 

google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);

function rangechange_handler(e) {
  console.log('You changed the range to ', e['start'], ' and ', e['end']);
}
מאפיינים: התחלה וסיום
ready

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

מאפיינים: ללא
select

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

מאפיינים: ללא

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

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