סקירה כללית
תרשים אינטראקטיבי של סדרות זמנים עם הערות אופציונליות.
מעכשיו, בציר הזמן של ההערות משתמשים בתרשימי הערות באופן אוטומטי.
דוגמה
<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 | לא נכון | הפעלת טכניקת שרטוט יעילה יותר לקריאה השנייה והמאוחרת יותר ב-
|
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 | 'הקרוב ביותר' | איזו נקודה בסדרה להדגיש, והערכים המתאימים להצגה במקרא. יש לבחור אחד מהערכים האלה:
|
מיקום האגדה | string | 'sameRow' | האם למקם את המקרא הצבעוני באותה שורה עם לחצני הזום והתאריך ('sameRow'), או בשורה חדשה ('newRow'). |
מקסימלי | number | אוטומטי | הערך המקסימלי להצגה בציר ה-Y. אם הערך המקסימלי של הנקודה בנתונים יחרוג מהערך הזה, המערכת תתעלם מההגדרה הזו והתרשים יותאם כדי להציג את סימן הווי הגדול הבא מעל נקודת הנתונים המקסימלית. הוא יקבל עדיפות על פני המספר המקסימלי של ציר Y שנקבע על ידי scaleType . |
דק' | number | אוטומטי | הערך המינימלי להצגה בציר ה-Y. אם ערך הנתונים המינימלי יהיה נמוך מהערך הזה, המערכת תתעלם מההגדרה הזו והתרשים יותאם כדי להציג את סימן הווי הגדול הבא מתחת לנקודת הנתונים המינימלית. הוא יקבל עדיפות על פני ערכי המינימום של ציר Y שייקבעו על ידי scaleType . |
מספרי עיצוב | מחרוזת, או מפה של מספר:צמדי מחרוזות | אוטומטי | המדיניות מציינת את דפוסי המספרים שישמשו לעיצוב הערכים בראש התרשים. הדפוסים צריכים להיות בפורמט שצוין על ידי סיווג java DecimalFormat.
אם האפשרות הזו תצוין, המערכת תתעלם מאפשרות |
עמודי קנה מידה | מערך של מספרים | אוטומטי | קביעת הערכים שיוצגו בסימני הציר של ציר ה-Y בתרשים. הגדרת ברירת המחדל צריכה להיות סולם שמאלי בצד שמאל, שמתאים לשתי הסדרות. עם זאת, הצלעות השונות בתרשים יכולות להתאים לערכי הסדרות השונים. האפשרות הזו מקבלת מערך של אפס עד שלושה מספרים, שמציין את האינדקס (המבוסס על אפס) של הסדרה, שישמש כערך קנה המידה. המקומות שבהם הערכים האלה מוצגים תלויים במספר הערכים שהמערך שלך צריך לכלול:
כשמציגים יותר מסולם אחד, מומלץ להגדיר את האפשרות |
קנה מידה | string | 'קבוע' | הגדרת הערכים המקסימליים והמינימליים שמוצגים בציר ה-Y. האפשרויות הבאות זמינות:
אם מציינים את האפשרויות המינימום ו/או המקסימום, הן יקבלו עדיפות על פני ערכי המינימום והמקסימום שנקבעו לפי סוג קנה המידה. |
עובי | 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 . |
|
למקומות | התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים
ושיטות השיחה אחרי שהוא משורטט, צריך להגדיר מאזין לאירוע הזה לפני שמתקשרים לשיטה draw ולהתקשר אליהן רק אחרי שהאירוע הופעל |
ללא |
בחירה | כשהמשתמש לוחץ על סימון הערה (סמן), נבחר התא המתאים בטבלת הנתונים. בשלב הזה, התצוגה החזותית מפעילה את האירוע הזה. | ללא |
הערה: עקב מגבלות מסוימות, ייתכן שאירועים לא יושלכו אם תיגשו לדף בדפדפן כקובץ (למשל, "file:// ") ולא משרת (למשל, "http://www").
מדיניות נתונים
כל הנתונים והקוד מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.
הערות
בשל הגדרות אבטחה של Flash, ייתכן שההצגה הזו (וכל הרכיבים החזותיים מבוססי ה-Flash) לא תפעל כראוי כאשר הגישה אליה מתבצעת ממיקום קובץ בדפדפן (למשל, file:///c:/webhost/myhost/myviz.html) ולא מכתובת אתר של שרת אינטרנט (למשל, http://www.myhost.com/myviz.html). בדרך כלל מדובר בבעיית בדיקה בלבד. אפשר להתגבר על הבעיה הזו כפי שמתואר באתר של Macromedia.