نظرة عامة
المخطط الزمني هو رسم بياني يوضّح كيفية استخدام مجموعة من الموارد على مدار الوقت. إذا كنت تدير مشروعًا برمجيًا وتريد توضيح من يجري الحدث وموعده، أو إذا كنت تنظم مؤتمرًا وتحتاج إلى جدولة غرف الاجتماعات، فسيكون المخطط الزمني في الغالب اختيارًا مرئيًا معقولاً. ومن الأنواع الشائعة للمخطط الزمني مخطط غانت.
ملاحظة: في كائنات JavaScript التاريخ، تتم فهرسة الأشهر بدءًا من الصفر وترتفع حتى الحادية عشرة، ويكون كانون الثاني (يناير) الشهر 0 وكانون الأول (ديسمبر) 11 شهرًا. إذا لم يظهر المخطط الزمني لمدة شهر، هذا هو السبب على الأرجح. لمزيد من المعلومات، راجِع صفحة التواريخ والأوقات.
مثال بسيط
لنفترض أنك تريد أن تخطّط لمعرفة مواعيد تنفيذ رؤساء الولايات المتحدة لبنودهم. هنا، "الموارد" هي الرؤساء، ويمكننا رسم نصب كل رئيس على هيئة شريط:
يؤدي تحريك مؤشر الماوس فوق شريط إلى إظهار تلميح بمعلومات أكثر تفصيلاً.
بعد تحميل حزمة timeline وتحديد استدعاء لرسم الرسم البياني عند عرض الصفحة، ينشئ أسلوب 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 | |
|---|---|---|---|---|---|
| الغرض: | تصنيف الصف | تصنيف الشريط (اختياري) | تلميح (اختياري) | بدء | إنهاء |
| نوع البيانات: | سلسلة | سلسلة | سلسلة | رقم أو تاريخ | رقم أو تاريخ |
| الدور: | البيانات | البيانات | تلميح | البيانات | البيانات |
خيارات الضبط
| الاسم | |
|---|---|
| تبديل الصف |
لتحديد ما إذا كان يجب استخدام لون خلفية بديل في الرسم البياني حسب فهرس الصف (أي تعديل لون الخلفية للصفوف التي تمت فهرستها زوجيًا يكون لونها أغمق). في حال اختيار القيمة "false"، ستكون خلفية الرسم البياني لونًا موحدًا. في حال الضبط على "true"، سيتم تلوين خلفية الرسم البياني بفهرس الصفوف. (ملاحظة: إصدار 51 النشط والإصدارات الأحدث) النوع: منطقي
افتراضي: صحيح
|
| تجنُّب التداخل في خطوط الشبكة |
ما إذا كانت عناصر العرض (على سبيل المثال، الأشرطة في مخطط زمني) يجب أن تحجب خطوط الشبكة. وفي حال اختيار القيمة "false"، قد تغطي عناصر العرض خطوط الشبكة بالكامل. إذا كانت القيمة "true"، قد يتم تعديل عناصر العرض بحيث تبقى خطوط الشبكة مرئية. النوع: منطقي
افتراضي: صحيح
|
| لون الخلفية |
لون الخلفية للمنطقة الرئيسية من المخطط. يمكن أن تكون إما سلسلة لون HTML بسيطة، على سبيل المثال: النوع: سلسلة أو كائن
تلقائي: "أبيض"
|
| ألوان |
الألوان التي يمكن استخدامها لعناصر الرسم البياني. مصفوفة من السلاسل، حيث يكون كل عنصر عبارة عن سلسلة لون HTML، على سبيل المثال: النوع: مصفوفة من السلاسل
الافتراضي: الألوان التلقائية
|
| تفعيل التفاعل |
ما إذا كان الرسم البياني يعرض أحداثًا مستندة إلى المستخدمين أو يتفاعل مع تفاعل المستخدم. وفي حال اختيار القيمة "false"، لن يعرض الرسم البياني أحداث "اختيار" أو أحداث أخرى قائمة على التفاعل (ولكنه سيعرض أحداث جاهزة أو خطأ)، ولن يعرض نص تمرير النص أو سيتغيّر بناءً على إدخال المستخدم. النوع: منطقي
افتراضي: صحيح
|
| اسم الخط |
واجهة الخط الافتراضية لكل النص في المخطط. يمكنك إلغاء هذا باستخدام الخصائص لعناصر معينة في الرسم البياني. النوع: سلسلة
افتراضي: 'Arial'
|
| حجم الخط |
حجم الخط الافتراضي، بالبكسل، لكل النص في المخطط. يمكنك إلغاء هذا باستخدام الخصائص لعناصر معينة في الرسم البياني. النوع: الرقم
افتراضي: تلقائي
|
| فرض إطار |
لرسم المخطط داخل إطار مضمن. (تجدر الإشارة إلى أنه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية لـ IE8 في إطارات i.) النوع: منطقي
تلقائي: خطأ
|
| الارتفاع |
ارتفاع المخطط بالبكسل. النوع: الرقم
افتراضي: ارتفاع العنصر المضمن
|
| التسلسل الزمني.barLabelStyle |
كائن يحدد نمط نص تصنيف الشريط. ويكون على النحو التالي: {fontName: <string>, fontSize: <string>}
يمكنك أيضًا الاطّلاع على النوع: الكائن
تلقائي: null
|
| التسلسل الزمني.colorByRowLabel |
وفي حال ضبطها على "صحيح"، يتم ضبط الألوان على كل شريط في الصف نفسه. والإعداد التلقائي هو استخدام لون واحد لكل تصنيف شريط. النوع: منطقي
تلقائي: خطأ
|
| التسلسل الزمني.groupByRowLabel |
وفي حال الضبط على "خطأ"، يتم إنشاء صف واحد لكل إدخال النوع: منطقي
افتراضي: صحيح
|
| التسلسل الزمني.rowLabelStyle |
كائن يحدد نمط نص تصنيف الصف. ويكون على النحو التالي: {color: <string>, fontName: <string>, fontSize: <string>}
يمكن أن يكون النوع: الكائن
تلقائي: null
|
| التسلسل الزمني.showBarLabels |
وعند الضبط على "خطأ"، يتم حذف تصنيفات الشريط. الإعداد التلقائي هو عرضها. النوع: منطقي
افتراضي: صحيح
|
| الجدول الزمني show.showRowLabels |
وعند الضبط على "خطأ"، يتم حذف تصنيفات الصفوف. الإعداد التلقائي هو عرضها. النوع: منطقي
افتراضي: صحيح
|
| التسلسل الزمني.أحادي اللون |
تلوين جميع الأشرطة بنفس الشكل. يتم تحديدها كقيمة سداسية عشرية (على سبيل المثال، "#8d8"). النوع: سلسلة
تلقائي: null
|
| tooltip.isHtml |
اضبط السمة على ملاحظة: لا يمكن تخصيص محتوى تلميح HTML عبر دور بيانات عمود تلميحات الأدوات من خلال التمثيل البصري لمخطط الفقاعات التفسيرية. النوع: منطقي
افتراضي: صحيح
|
| tooltip.trigger |
تفاعل المستخدم الذي يتسبب في عرض التلميح:
النوع: سلسلة
تلقائي: "التركيز"
|
| width |
عرض المخطط بالبكسل. النوع: الرقم
افتراضي: عرض العنصر المضمن
|
الطرق
| الطريقة | |
|---|---|
draw(data, options) |
لرسم المخطط. لا يقبل الرسم البياني أي طلبات أخرى للحصول على طريقة إلا بعد إطلاق فعالية نوع الإرجاع: لا شيء
|
clearChart() |
محو الرسم البياني وإصدار جميع الموارد المخصّصة له نوع الإرجاع: لا شيء
|
getSelection() |
لعرض صفيف من كيانات المخطط المحددة.
الكيانات القابلة للتحديد هي أشرطة وإدخالات تسمية توضيحية وفئات.
بالنسبة إلى هذا الرسم البياني، لا يمكن اختيار سوى كيان واحد في أي لحظة.
نوع العرض: مصفوفة من عناصر التحديد
|
الأحداث
| الاسم | |
|---|---|
error |
يتم الإطلاق عند حدوث خطأ عند محاولة عرض الرسم البياني. الخصائص: رقم التعريف، الرسالة
|
onmouseover |
يتم الإطلاق عندما يمرر المستخدم الماوس فوق وحدة مرئية. لإرجاع فهارس الصفوف والأعمدة الخاصة بعنصر جدول البيانات المقابل. يرتبط شريط بخلية في جدول البيانات، وإدخال أسطوري إلى عمود (فهرس الصف فارغ)، والفئة إلى صف (فهرس العمود فارغ). الخصائص: صف، عمود
|
onmouseout |
يتم الإطلاق عندما يمرر المستخدم بعيدًا عن وحدة مرئية. لإرجاع فهارس الصفوف والأعمدة الخاصة بعنصر جدول البيانات المقابل. يرتبط شريط بخلية في جدول البيانات، وإدخال أسطوري إلى عمود (فهرس الصف فارغ)، والفئة إلى صف (فهرس العمود فارغ). الخصائص: صف، عمود
|
ready |
المخطط جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد مستمع لهذا الحدث قبل طلب طريقة الخصائص: بلا
|
select |
يتم الإطلاق عندما ينقر المستخدم على كيان مرئي. للاطّلاع على ما تم اختياره، يمكنك الاتصال
الخصائص: بلا
|
سياسة البيانات
تتم معالجة جميع الرموز والبيانات وعرضها في المتصفح. ولا يتم إرسال أي بيانات إلى أي خادم.