סקירה כללית
ציר זמן הוא תרשים שמראה את אופן השימוש בקבוצת משאבים לאורך זמן. אם אתם מנהלים פרויקט תוכנה ורוצים להראות מי עושה מה ומתי, או אם מארגנים כנסיה וצריך לקבוע חדרי ישיבות, ציר זמן יכול להיות בחירה סבירה להמחשה. אחד הסוגים הפופולריים של ציר הזמן הוא תרשים גאנט.
הערה: באובייקטים של תאריך ב-JavaScript, החודשים נוספים לאינדקס החל מאפס ועולים עד אחת-עשרה, כאשר ינואר הוא חודש 0 ודצמבר הוא חודש 11. אם נראה שציר הזמן שלכם חלף בחודש, סביר להניח שזו הסיבה לכך. למידע נוסף, עיינו בדף תאריכים ושעות.
דוגמה פשוטה
נניח שאתם רוצים להציג מתי נשיאים אמריקאים מילאו את תקופות הבחירות שלהם. כאן ה"משאבים" הם הנשיאים, ואנחנו יכולים להציג את המונח של כל נשיא כעמודה:
אם תעבירו את העכבר מעל לסרגל כלשהו, יוצג הסבר קצר עם מידע מפורט יותר.
אחרי שטוענים את החבילה timeline והגדרת קריאה חוזרת (callback) לשרטוט התרשים במהלך עיבוד הדף, ה-method drawChart() יוצרת google.visualization.Timeline() וממלאת dataTable בשורה אחת לכל נשיא.
בתוך dataTable, העמודה הראשונה כוללת את שם הנשיא, והעמודה השנייה והשלישית הן שעות ההתחלה והסיום. הם מסוג Date של JavaScript, אבל הם יכולים להיות גם מספרים פשוטים.
לבסוף, מפעילים את השיטה draw() בתרשים, שמציגה אותה בתוך div עם אותו מזהה (timeline) שנעשה בו שימוש כאשר container הוצהרה בשורה הראשונה של drawChart().
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>
אפשר להתאים אישית את צירי הזמן של Google Charts, ובדוגמאות הבאות נציג דרכים נפוצות להתאים את המראה של צירי הזמן.
הוספת תוויות לעמודות
בנוסף לתוויות השורות (" Washington", "Adams" ו-"Jefferson" שלמעלה) ניתן להוסיף תוויות לעמודות ספציפיות. כאן מחליפים את תוויות השורות למספרים פשוטים ומציבים את השם של כל נשיא על הסרגל שלו.
בקוד הזה, הוספנו עמודה חדשה לנתונים כדי לכלול בה את תוויות העמודות: השם המלא של כל נשיא. כשיש ארבע עמודות בציר הזמן dataTable, הראשונה מתפרשת כתווית השורה, השנייה כתווית של העמודה והשלישית והרביעית מוגדרת כנקודת התחלה וסוף.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example2.1" style="height: 200px;"></div>
תוויות השורות החדשות שלמעלה לא אינפורמטיביות במיוחד, ולכן כדאי להסיר אותן באמצעות האפשרות showRowLabels בציר הזמן.
כברירת מחדל, showRowLabels הוא true. אם מגדירים אותו ל-false, מסירים את תוויות השורות:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { showRowLabels: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example2.2" style="height: 180px;"></div>
דוגמה מתקדמת
כדי להפוך את ציר הזמן שלנו למורכב יותר, נוסיף לתרשים שלנו סגני נשיא ומזכירות מדינה. ג'ון אדמס היה סמנכ"ל לפני שהפך לנשיא, ותומס ג'פרסון היה מזכיר המדינה, לאחר מכן סמנכ"ל ולבסוף נשיא.
בצירי הזמן, למשאב יש צבע זהה גם כשהוא מופיע בכמה שורות, כך שבתרשים הבא כל אדם מיוצג בצבע עקבי.
התרשים הזה יכול לשמש לבדיקה קלה של תוויות, ולכן חלק ממזכירות המדינה פעלו לפרקי זמן קצרים מאוד. כשהתווית גדולה מדי לעמודה, היא מופיעה בצורה מקוצרת או נמחקת, בהתאם לגודל העמודה. המשתמשים יכולים תמיד להעביר את העכבר מעל לסרגל כדי לקבל מידע של הסבר קצר.
ציר הזמן יפרוס את השורות לפי הסדר – הנשיא בראש מזכיר המדינה – כי זה הסדר שבו הן מופיעות בקוד הבא. עם זאת, פריסת העמודות נקבעת רק לפי זמני ההתחלה והסיום, כך שהחלפה של שני מזכירים של מדינה או שני נשיאים בdataTable לא משפיעה על התרשים.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
[ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
[ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
[ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
[ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
[ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
[ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
[ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
[ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
]);
chart.draw(dataTable);
}
</script>
<div id="example3.1" style="height: 200px;"></div>
הוספת עמודות על שורה אחת
בניגוד לפופים, יכול להיות רק נשיא אחד בארה"ב בכל פעם, כך שאם נסמן את כל השורות שלנו כ'נשיא', ציר הזמן ישלב את שלוש השורות של התרשים הראשון בשורה אחת כדי שהמצגת תהיה נקייה יותר. אפשר לשלוט בהתנהגות הזו באמצעות
האפשרות groupByRowLabel.
זוהי התנהגות ברירת המחדל:
עכשיו נגדיר את groupByRowLabel ל-false ונפצל את השורה האחת לשלוש:
הקוד להשבתת הקיבוץ:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { groupByRowLabel: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example4.2" style="height: 200px;"></div>
שליטה בצבעים
כברירת מחדל, ב-Google Charts בוחרים צבעים שעברו אופטימיזציה לאסתטיקה ולקריאה (כולל משתמשים עם מוגבלויות חזותיות). אפשר להתאים אישית את התנהגות ברירת המחדל באמצעות האפשרויות colorByRowLabel, singleColor, backgroundColor ו-colors.
האפשרות colorByRowLabel צבעה את כל העמודות באותה שורה. כדאי להשתמש באפשרות הזו כשיש פערים בין העמודות.
ברירת המחדל של colorByRowLabel היא false, כך שכאן אנחנו מחליפים אותה ומגדירים אותה ל-true.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Beginning JavaScript', new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0) ],
[ 'Magnolia Room', 'Intermediate JavaScript', new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,0,0), new Date(0,0,0,17,30,0) ],
[ 'Willow Room', 'Beginning Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Willow Room', 'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Willow Room', 'Advanced Google Charts', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);
var options = {
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.1" style="height: 100px;"></div>
אם רוצים שכל העמודות יהיו באותו צבע, בלי קשר לשורה שבה הן יופיעו, משתמשים באפשרות singleColor:
בקוד הבא, singleColor מוגדר לערך הקסדצימלי כדי לצבוע את כל העמודות בירוק בהיר:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { singleColor: '#8d8' },
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.2" style="height: 150px;"></div>
אפשר לשנות את צבע הרקע של השורות באמצעות backgroundColor:
הערך backgroundColor מצוין כערך הקסדצימלי. כאן אנחנו מתאימים אותו עם colorByRowLabel כדי להציג טראקים בשיחת ועידה:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.3');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
backgroundColor: '#ffd'
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.3" style="height: 150px;"></div>
לאחר מכן, כדי להגדיר את צבע הרקע לצבע מתחלף או לא משתנה לפי אינדקס שורות, משתמשים באפשרות alternatingRowStyle (פעילה בגרסה 51 ואילך):
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.4');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
alternatingRowStyle: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.4" style="height: 150px;"></div>
כדי לשלוט בצבעים של עמודות בודדות, משתמשים באפשרות colors:
colors לוקחת מערך של ערכי הקסדצימליים שמחילים על העמודות לפי הסדר:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.5');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.5" style="height: 150px;"></div>
אם נדרשים בתרשים יותר צבעים מאלה שצוינו, התרשים ייראה כאילו singleColor מוגדר לצבע הראשון ברשימה. (הדבר נכון לגבי כל התרשימים של Google, לא רק לגבי צירי זמן).
דרך נוספת לשלוט בצבעים של עמודות בודדות היא להשתמש בעמודה עם תפקיד סגנון.
הקוד שצריך להוסיף ולאכלס עמודת סגנון:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.6');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
[ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example5.6" style="height: 150px;"></div>
שינוי הגופנים
תוכלו לבחור את הגופן והגופן לתוויות של כל שורה באמצעות rowLabelStyle, ולתוויות בכל עמודה באמצעות barLabelStyle. שני הסוגים מופיעים בהמשך.
הערה: הקפידו לבחור גופנים שהדפדפנים של המשתמשים שלכם יוכלו לעבד.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example6.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
};
chart.draw(dataTable, options);
}
</script>
<div id="example6.1" style="height: 200px;"></div>
אי אפשר להגדיר את הצבע של טקסט בbarLabel.
קווי רשת חופפים
ב-Google Charts מתבצע התאמות קטנטנות בנקודות קצה של עמודות כדי למנוע הסתרה של קווי הרשת בציר הזמן. כדי למנוע את ההתנהגות הזו, צריך להגדיר את האפשרות avoidOverlappingGridLines ל-false.
כדי להמחיש את האפקט, ריכזנו כאן שתי דוגמאות: הראשונה עם קו רשת חופף והשנייה בלי רשת.
לפניכם הקוד שחופף לקווי רשת:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example7.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
[ 'Magnolia Room', 'App Engine', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);
var options = {
timeline: { showRowLabels: false },
avoidOverlappingGridLines: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example7.1" style="height: 200px;"></div>
התאמה אישית של הסברים קצרים
אתם יכולים להוסיף עמודת הסבר קצר לטבלת נתונים עם חמש עמודות כדי להתאים את התוכן שהמשתמשים רואים כשהם מעבירים את העכבר מעל לעמודים בציר הזמן. כדי לספק הסברים קצרים שלא מוגדרים כברירת מחדל, כל שורה בטבלת הנתונים צריכה לכלול את כל חמש העמודות (תווית שורה, תווית עמודה, הסבר קצר, התחלה וסיום):
אם תעבירו את העכבר מעל לעמודה יופיע הסבר קצר עם הטקסט שמוגדר בעמודה השלישית. בתרשים הזה אנחנו צריכים להגדיר את העמודה השנייה כערכי דמה (כאן, null) כדי שההסברים הקצרים יוכלו להופיע בעמודה השלישית.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline-tooltip');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
dataTable.addColumn({ type: 'string', role: 'tooltip' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'Adams', null, 'John', new Date(1797, 2, 3), new Date(1801, 2, 3) ],
[ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline-tooltip" style="height: 180px;"></div>
</body>
</html>
בטעינה
שם החבילה של google.charts.load הוא timeline:
google.charts.load("current", {packages: ["timeline"]});
שם הכיתה של התצוגה החזותית הוא google.visualization.Timeline:
var visualization = new google.visualization.Timeline(container);
פורמט נתונים
שורות: כל שורה בטבלה מייצגת סרגל של ציר זמן.
עמודות:
| עמודה 0 | עמודה 1 | עמודה 2 | עמודה 3 | עמודה 4 | |
|---|---|---|---|---|---|
| מטרה: | תווית שורה | תווית העמודה (אופציונלי) | הסבר קצר (אופציונלי) | התחלה | סיום |
| סוג הנתונים: | string | string | string | מספר או תאריך | מספר או תאריך |
| תפקיד: | נתונים | נתונים | הסבר קצר | נתונים | נתונים |
אפשרויות הגדרה
| שם | |
|---|---|
| alternatingRowStyle |
ההגדרה קובעת אם צבע הרקע בתרשים יתחלף לפי אינדקס השורות (כלומר, שינוי גוון הרקע של שורות שנוספו לאינדקס בגוון כהה יותר). אם המדיניות מוגדרת כ-False, רקע התרשים יהיה בצבע אחד אחיד. אם הערך הוא True, הגוון של רקע התרשים ישתנה לפי אינדקס השורות. (הערה: פעילה מגרסה v51 ואילך) סוג: בוליאני
ברירת מחדל: True
|
| avoidOverlappingGridLines |
ההגדרה קובעת אם רכיבי תצוגה (למשל, העמודות בציר הזמן) מסתירים קווי רשת. אם הערך הוא False, יכול להיות שקווי רשת מכוסים במלואם על ידי רכיבי התצוגה. אם הערך הוא True, אפשר לשנות את רכיבי התצוגה כדי להשאיר את קווי הרשת גלויים. סוג: בוליאני
ברירת מחדל: True
|
| backgroundColor |
צבע הרקע של האזור הראשי בתרשים. יכולה להיות מחרוזת צבע פשוטה של HTML, לדוגמה: סוג: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
| צבעים |
הצבעים של הרכיבים בתרשים. מערך מחרוזות, כאשר כל רכיב הוא מחרוזת של צבע HTML, לדוגמה: סוג: מערך של מחרוזות
ברירת מחדל: צבעי ברירת מחדל
|
| enableInteractivity |
האם התרשים כולל אירועים מבוססי-משתמשים או מגיב לאינטראקציה של משתמשים? אם הערך הוא False, התרשים לא יציג אירועים מסוג 'בחירה' או אירועים אחרים המבוססים על אינטראקציה (אלא יגרום להצגה של אירועי שגיאה או אירועים מוכנים) ולא יציג טקסט מרחף או שינוי אחר בהתאם לקלט של המשתמשים. סוג: בוליאני
ברירת מחדל: True
|
| fontName |
גופן ברירת המחדל של כל הטקסט בתרשים. אפשר לשנות את זה באמצעות מאפיינים לרכיבים ספציפיים בתרשים. סוג: מחרוזת
ברירת מחדל: 'CPRA'
|
| fontSize |
גודל ברירת המחדל של הגופן, בפיקסלים, של כל הטקסט בתרשים. אפשר לשנות את זה באמצעות מאפיינים לרכיבים ספציפיים בתרשים. סוג: מספר
ברירת מחדל: אוטומטי
|
| forceIFrame |
משרטטים את התרשים בתוך מסגרת בתוך מסגרת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 משורטטים במסגרות i-frames). סוג: בוליאני
ברירת מחדל: false
|
| גובה |
גובה התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: גובה הרכיב שמכיל
|
| timeline.barLabelStyle |
אובייקט שמציין את סגנון הטקסט של תווית העמודה. זהו הפורמט הבא: {fontName: <string>, fontSize: <string>}
ראו גם את Type: object (סוג אובייקט)
ברירת מחדל: null
|
| timeline.colorByRowLabel |
אם היא מוגדרת כ-True, הצבעים בכל עמודה בשורה יהיו זהים. ברירת המחדל היא להשתמש בצבע אחד לכל תווית של עמודה. סוג: בוליאני
ברירת מחדל: false
|
| timeline.groupByRowLabel |
אם המדיניות מוגדרת כ-False, נוצרת שורה אחת לכל רשומה של סוג: בוליאני
ברירת מחדל: True
|
| timeline.rowLabelStyle |
אובייקט שמציין את סגנון הטקסט של תווית השורה. זהו הפורמט הבא: {color: <string>, fontName: <string>, fontSize: <string>}
הערך Type: object (סוג אובייקט)
ברירת מחדל: null
|
| timeline.showBarLabels |
אם המדיניות מוגדרת כ-False, התוויות של העמודה לא יופיעו. ברירת המחדל היא להציג אותם. סוג: בוליאני
ברירת מחדל: True
|
| timeline.showRowLabels |
אם המדיניות מוגדרת כ-False, תוויות השורות לא יופיעו. ברירת המחדל היא להציג אותם. סוג: בוליאני
ברירת מחדל: True
|
| timeline.singleColor |
הצבעים זהים בכל העמודות. מצוין כערך הקסדצימלי (למשל, '#8d8'). סוג: מחרוזת
ברירת מחדל: null
|
| tooltip.isHtml |
צריך להגדיר את הערך הערה: התאמה אישית של התוכן בהסבר הקצר ב-HTML דרך תפקיד הנתונים בעמודה של הסבר קצר לא נתמכת בהמחשה החזותית של תרשים הבועות. סוג: בוליאני
ברירת מחדל: True
|
| tooltip.trigger |
האינטראקציה של המשתמש שגורמת להצגת ההסבר הקצר:
סוג: מחרוזת
ברירת מחדל: 'focus'
|
| רוחב |
רוחב התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: רוחב הרכיב שמכיל
|
שיטות
| שיטה | |
|---|---|
draw(data, options) |
מצייר את התרשים. בתרשים יתקבלו קריאות נוספות ל-method, רק אחרי שהאירוע סוג החזרה: ללא
|
clearChart() |
ניקוי התרשים וכל המשאבים שהוקצו לו. סוג החזרה: ללא
|
getSelection() |
מחזירה מערך של ישויות התרשים שנבחרו.
ישויות שניתן לבחור הן עמודות, רשומות מקרא וקטגוריות.
עבור התרשים הזה, ניתן לבחור רק ישות אחת בכל רגע נתון.
סוג החזרה: מערך של רכיבי בחירה
|
אירועים
| שם | |
|---|---|
error |
מופעל כשמתרחשת שגיאה בניסיון לעבד את התרשים. מאפיינים: מזהה, הודעה
|
onmouseover |
מופעל כשהמשתמש מעביר את העכבר מעל ישות חזותית. מחזיר את האינדקסים של השורה והעמודה של הרכיב התואם בטבלת הנתונים. עמודה קשורה לתא בטבלת הנתונים, רשומת מקרא לעמודה (אינדקס השורות הוא null) וקטגוריה לשורה (אינדקס העמודה הוא null). מאפיינים: שורה, עמודה
|
onmouseout |
מופעל כשהמשתמש מזיז את העכבר מישות חזותית. מחזיר את האינדקסים של השורה והעמודה של הרכיב התואם בטבלת הנתונים. עמודה קשורה לתא בטבלת הנתונים, רשומת מקרא לעמודה (אינדקס השורות הוא null) וקטגוריה לשורה (אינדקס העמודה הוא null). מאפיינים: שורה, עמודה
|
ready |
התרשים מוכן לקריאות method חיצוניות. כדי לבצע אינטראקציה עם התרשים, ושל שיטות קריאה אחרי שרטוט, צריך להגדיר האזנה לאירוע הזה לפני
שמפעילים את ה-method מאפיינים:ללא
|
select |
מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לבדוק אילו קבוצות נבחרו, אפשר להתקשר למספר
מאפיינים:ללא
|
המדיניות בנושא נתונים
כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא נשלחים נתונים לאף שרת.