סקירה כללית
ציר זמן הוא תרשים שמציג אופן השימוש בקבוצה של משאבים לאורך זמן. אם אתם מנהלים פרויקט תוכנה ואתם רוצים להמחיש מי עושה מה ומתי, או אם אתם מארגנים כנס ורוצים לקבוע חדרי ישיבות, בדרך כלל ציר הזמן הוא בחירה סבירה להצגה חזותית. סוג פופולרי נוסף של קו זמן הוא תרשים הגאנטים.
הערה:באובייקטים של JavaScript בתאריך, החודשים נוספו לאינדקס החל מאפס ועולים עד אחת עשרה, כאשר ינואר הוא חודש 0 ו-11 בדצמבר. אם ציר הזמן שלך נראה כמו חודש, כנראה שהסיבה לכך היא. מידע נוסף זמין בדף תאריכים ושעות.
דוגמה פשוטה
נניח שאתם רוצים לשרטט מתי נשיאי ארצות הברית הגישו את התנאים שלהם. כאן, ה"משאבים" הם הנשיאים, ואנחנו יכולים לשרטט את המונח של כל נשיא לנשיאות:
העברת העכבר מעל עמודה מציגה הסבר קצר עם מידע מפורט יותר.
אחרי טעינת החבילה ב-timeline והגדרת הקריאה החוזרת (callback) כדי לשרטט את התרשים במהלך עיבוד הדף, השיטה drawChart() יוצרת google.visualization.Timeline() ואז ממלאת dataTable בשורה אחת לכל נשיא.
בתוך dataTable, העמודה הראשונה כוללת את שם הנשיא, והעמודה השנייה והשלישית הן זמני ההתחלה והסיום. הסוג הזה של JavaScript הוא מסוג Date, אבל הוא יכול להיות גם מספר פשוט.
לבסוף, אנו מפעילים את השיטה 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 התרשימים מותאמים אישית, ובדוגמאות הבאות נראה לכם כמה דרכים נפוצות להתאים את המראה של לוחות הזמנים שלכם.
סימון הסרגלים
בנוסף לתוויות השורות ('וושינגטון', 'אדמס', 'ג'פרסון' למעלה), אפשר להוסיף תוויות לעמודות בודדות. כאן, אנחנו משנים את תוויות השורות במספרים פשוטים, ומציבים את השם של כל נשיא על הסרגל שלו.
בקוד הזה הוספנו עמודה חדשה לנתונים שלנו כדי לכלול את תוויות העמודות: השם המלא של כל נשיא. כשיש ארבע עמודות על ציר זמן 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 בוחרים צבעים אופטימליים לאסתטיקה ולקריאות (כולל משתמשים עם מוגבלויות ראייה). אפשר להתאים אישית את התנהגות ברירת המחדל באמצעות האפשרויות 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 התרשימים מבצעת התאמות קטנטנות לנקודות קצה של סרגל כדי להימנע מהסתרה של קווי רשת בציר הזמן. כדי למנוע התנהגות כזאת, צריך להגדיר את האפשרות 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 | מספר או תאריך | מספר או תאריך |
| תפקיד: | נתונים | נתונים | הסבר קצר | נתונים | נתונים |
אפשרויות הגדרה
| שם | |
|---|---|
| AlteratingRowStyle |
האם התרשים מבצע החלפה של צבע הרקע לפי אינדקס של שורה (כלומר, גוון הצבע של שורות עם גוון כהה יותר בגוון כהה יותר). אם False, רקע התרשים יהיה צבע אחיד. אם הערך הוא true, הרקע של התרשים יחליף את הגוון לפי אינדקס השורות. (הערה: גרסה 51 ואילך פעילה) סוג: בוליאני
ברירת מחדל: נכון
|
| הימנעות מחפיפה ברשת |
אם הרכיבים ברשת המדיה (למשל, העמודות בציר זמן) צריכים לטשטש קווי רשת. אם False, קווי רשת יכולים להיות מכוסים לחלוטין על ידי רכיבי מסך. אם True, רכיבי התצוגה עשויים להשתנות כדי לשמור על קווי הרשת גלויים. סוג: בוליאני
ברירת מחדל: נכון
|
| צבע רקע |
צבע הרקע של האזור הראשי בתרשים. הוא יכול להיות מחרוזת צבע פשוטה ב-HTML, לדוגמה: Type: מחרוזת או אובייקט
ברירת מחדל: 'לבן'
|
| צבעים |
הצבעים שיש להשתמש בהם ברכיבי התרשים. מערך של מחרוזות, כאשר כל רכיב הוא מחרוזת צבע HTML. לדוגמה: סוג: מערך של מחרוזות
ברירת מחדל: צבעי ברירת מחדל
|
| enableInteractive |
האם התרשים כולל אירועים מבוססי-משתמשים או מגיב לאינטראקציה של משתמש. אם ההעדפה מקבלת את הערך False, התרשים לא יציג אירועי 'select' או אירועים אחרים מבוססי-אינטראקציות (אבל יגרום לתיעוד של אירועי הכנה או שגיאות), ולא יציג טקסט מרחף או ישתנה בדרך אחרת בהתאם לקלט של המשתמשים. סוג: בוליאני
ברירת מחדל: נכון
|
| שם גופן |
תצוגת ברירת המחדל של הגופן של כל הטקסט בתרשים. אפשר לשנות זאת באמצעות המאפיינים של רכיבי תרשים ספציפיים. סוג: מחרוזת
ברירת מחדל: 'xls'
|
| גודל גופן |
גודל הגופן המוגדר כברירת מחדל, בפיקסלים, של כל הטקסט בתרשים. אפשר לשנות זאת באמצעות המאפיינים של רכיבי תרשים ספציפיים. סוג: מספר
ברירת מחדל: אוטומטי
|
| forceIFrame |
משרטט את התרשים בתוך מסגרת מוטבעת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 מצוירים ב-i-frames). סוג: בוליאני
ברירת מחדל: False
|
| גובה |
גובה התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: הגובה של הרכיב שמכיל את הסרטון
|
| קו זמן.barLabelStyle |
אובייקט שמציין את סגנון הטקסט של תווית הסרגל. זהו הפורמט הרצוי: {fontName: <string>, fontSize: <string>}
הצגה של Type: אובייקט
ברירת מחדל: null
|
| ציר זמן.colorByRowLabel |
אם היא מוגדרת כ-True, הצבע של כל עמודה בשורה זהה. ברירת המחדל היא שימוש בצבע אחד לכל תווית של עמודה. סוג: בוליאני
ברירת מחדל: False
|
| ציר זמן.groupByRowLabel |
אם המדיניות מוגדרת כ-False, נוצרת שורה אחת לכל רשומה ב- סוג: בוליאני
ברירת מחדל: נכון
|
| קו זמן.rowLabelStyle |
אובייקט שמציין את סגנון הטקסט של תווית השורה. זהו הפורמט הרצוי: {color: <string>, fontName: <string>, fontSize: <string>}
השדה Type: אובייקט
ברירת מחדל: null
|
| קו זמן.showBarLabels |
אם המדיניות מקבלת את הערך False, תוויות העמודות מושמטות. ברירת המחדל היא להציג אותם. סוג: בוליאני
ברירת מחדל: נכון
|
| ציר זמן.showRowLabels |
אם המדיניות מקבלת את הערך False, תוויות השורות מושמטות. ברירת המחדל היא להציג אותם. סוג: בוליאני
ברירת מחדל: נכון
|
| קו זמן.singleColor |
צבע כל העמודות יהיה זהה. מוגדר כערך הקסדצימלי (למשל, ' #8d8'). סוג: מחרוזת
ברירת מחדל: null
|
| overview.isHtml |
יש להגדיר את הערך הערה: ההתאמה האישית של תוכן ההסבר הקצר ב-HTML באמצעות תפקיד נתוני העמודה של ההסבר הקצר לא נתמכת על ידי התצוגה החזותית תרשים בועות. סוג: בוליאני
ברירת מחדל: נכון
|
| overview.trigger |
האינטראקציה של המשתמש שגרמה להצגת ההסבר הקצר:
סוג: מחרוזת
ברירת מחדל: 'התמקדות'
|
| רוחב |
רוחב התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: הרוחב של הרכיב שמכיל
|
שיטות
| שיטה | |
|---|---|
draw(data, options) |
משרטט את התרשים. התרשים מקבל קריאות נוספות לשיטה רק אחרי
האירוע סוג החזרה: אין
|
clearChart() |
ניקוי התרשים ושחרור כל המשאבים שהוקצו לו. סוג החזרה: אין
|
getSelection() |
היא מחזירה מערך של ישויות התרשים שנבחרו.
ישויות שניתן לבחור הן עמודות, ערכי אגדה וקטגוריות.
בתרשים הזה אפשר לבחור רק ישות אחת בכל רגע נתון.
סוג החזרה: מערך של רכיבי בחירה
|
אירועים
| שם | |
|---|---|
error |
מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים. מאפיינים: מזהה, הודעה
|
onmouseover |
מופעל כשהמשתמש מעביר את העכבר מעל ליישות חזותית. מחזירה את האינדקסים של השורה והעמודה של הרכיב המתאים בטבלת הנתונים. סרגל תואם לתא בטבלת הנתונים, ערך מקרא לעמודה (אינדקס השורה הוא ריק) וקטגוריה לשורה (אינדקס העמודה הוא ריק). מאפיינים: שורה, עמודה
|
onmouseout |
מופעל כשהמשתמש מעביר את העכבר מעל ליישות ויזואלית. מחזירה את האינדקסים של השורה והעמודה של הרכיב המתאים בטבלת הנתונים. סרגל תואם לתא בטבלת הנתונים, ערך מקרא לעמודה (אינדקס השורה הוא ריק) וקטגוריה לשורה (אינדקס העמודה הוא ריק). מאפיינים: שורה, עמודה
|
ready |
התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים ועם
שיטות השיחה אחרי ששרטטים אותו, צריך להגדיר למאזינים אירוע זה לפני שמתקשרים אל השיטה מאפיינים: ללא
|
select |
מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לראות מה נבחר, צריך להתקשר למספר מאפיינים: ללא
|
מדיניות נתונים
כל הנתונים והקוד מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.