المخطّطات الزمنية

  1. Overview
  2. مثال بسيط
  3. تصنيف الأشرطة
  4. مثال متقدّم
  5. وضع الأشرطة في صف واحد
  6. تغيير الخطوط
  7. التحكّم في الألوان
  8. خطوط الشبكة المتداخلة
  9. تخصيص التلميحات
  10. جارٍ التحميل
  11. تنسيق البيانات
  12. خيارات الإعداد
  13. الطُرق
  14. الأحداث
  15. سياسة البيانات

نظرة عامة

المخطط الزمني هو رسم بياني يعرض كيفية استخدام مجموعة من الموارد بمرور الوقت. إذا كنت تدير مشروعًا برمجيًا وتريد توضيح من يقوم بماذا ومتى، أو إذا كنت تنظم مؤتمرًا وتحتاج إلى جدولة غرف الاجتماعات، فغالبًا ما يكون الجدول الزمني خيار تصور معقول. أحد أنواع المخططات الزمنية الشائعة هو مخطط Gantt.

ملاحظة: في عناصر "تاريخ JavaScript"، تتم فهرسة الأشهر بدءًا من صفر وتصل إلى أحد عشر، ويكون كانون الثاني (يناير) هو الشهر 0 وكانون الأول (ديسمبر) هو الشهر 11. وإذا بدا المخطط الزمني غير مكتمل لمدة شهر، هذا هو السبب على الأرجح. لمزيد من المعلومات، يمكنك الاطّلاع على صفحة التواريخ والأوقات.

مثال بسيط

لنفترض أنك تريد التخطيط للوقت الذي قضاه فيه الرؤساء الأمريكيون في فتراتهم. هنا، "الموارد" هم الرؤساء، ويمكننا رسم مصطلح كل رئيس على أنه شريط:

يؤدي تمرير مؤشر الماوس فوق شريط إلى إظهار تلميح يتضمّن معلومات أكثر تفصيلاً.

بعد تحميل حزمة timeline وتحديد طلب استدعاء لرسم الرسم البياني عند عرض الصفحة، تنشئ الطريقة 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 قابلة للتخصيص، وسنعرض لك في الأمثلة التالية بعض الطرق الشائعة لتخصيص مظهر المخططات الزمنية الخاصة بك.

تصنيف الأشرطة

بالإضافة إلى تسميات الصفوف ("واشنطن" و"آدامز" و"جيفيرسون" أعلاه)، يمكنك تصنيف الأشرطة الفردية. هنا، نقوم بتغيير تسميات الصفوف إلى أرقام بسيطة ونضع اسم كل رئيس على البار الخاص به.

في هذه التعليمة البرمجية، قمنا بإدراج عمود جديد في بياناتنا للاحتفاظ بتسميات الأشرطة: الاسم الكامل لكل رئيس. عند وجود أربعة أعمدة في المخطط الزمني 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 (الإصدار v51+ النشط):

<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
الغرض: تصنيف الصف تصنيف الشريط (اختياري) تلميح (اختياري) بدء إنهاء
نوع البيانات: سلسلة سلسلة سلسلة رقم أو تاريخ رقم أو تاريخ
الدور: البيانات البيانات تلميح البيانات البيانات

 

خيارات الإعداد

الاسم
alternatingRowStyle

تحدّد هذه السمة ما إذا كان يجب أن يبدّل الرسم البياني لون الخلفية حسب فهرس الصف (أي تغيير لون الخلفية الخفيف للصفوف التي تمت فهرستها الزوجية إلى تدرُّج أغمق). إذا كانت القيمة "false"، ستكون خلفية الرسم البياني لونًا واحدًا موحدًا. إذا كانت القيمة هي true، سيتم تغيير درجة اللون حسب فهرس الصف. (ملاحظة: الإصدار 51 النشط أو الإصدارات الأحدث)

النوع: قيمة منطقية
القيمة التلقائية:صحيح
avoidOverlappingGridLines

لتحديد ما إذا كانت عناصر العرض (مثل الأشرطة في مخطط زمني) يجب أن تخفي خطوط الشبكة. وفي حال اختيار القيمة "false"، قد تغطّي عناصر العرض خطوط الشبكة بالكامل. إذا كانت القيمة هي "صحيح"، يمكن تغيير عناصر العرض للحفاظ على ظهور خطوط الشبكة.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
backgroundColor

لون الخلفية للمنطقة الرئيسية من الرسم البياني. يمكن أن تكون إما سلسلة لون HTML بسيطة، على سبيل المثال: 'red' أو '#00cc00'، أو كائنًا بالسمات التالية.

النوع: سلسلة أو كائن
الوضع التلقائي: "أبيض"
الألوان

الألوان المراد استخدامها لعناصر الرسم البياني تمثّل هذه السمة مصفوفة من السلاسل يكون فيها كل عنصر سلسلة لون HTML، على سبيل المثال: colors:['red','#004411'].

النوع: مصفوفة من السلاسل
تلقائي: الألوان التلقائية
enableInteractivity

ما إذا كان الرسم البياني يعرض أحداثًا مستندة إلى المستخدمين أو يتفاعل مع تفاعل المستخدم إذا كانت القيمة "false"، لن يعرض الرسم البياني الأحداث "select" أو غيرها من الأحداث المستندة إلى التفاعل (ولكنه سيعرض أحداثًا جاهزة أو يعرض أخطاء)، ولن يعرض النصّ التمريري أو يتغيّر استنادًا إلى البيانات التي أدخلها المستخدِم.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
fontName

واجهة الخط التلقائية لكل النص في الرسم البياني ويمكنك إلغاء هذا الإجراء باستخدام سمات لعناصر محدَّدة في الرسم البياني.

النوع: سلسلة
القيمة التلقائية: "Arial"
fontSize

حجم الخط الافتراضي بالبكسل لجميع النص في الرسم البياني. ويمكنك إلغاء هذا الإجراء باستخدام سمات لعناصر محدَّدة في الرسم البياني.

النوع: رقم
تلقائي: تلقائي
forceIFrame

لرسم الرسم البياني داخل إطار مضمّن. (يُرجى ملاحظة أنّه في IE8، يتم تجاهل هذا الخيار، ويتم رسم كل مخططات IE8 بالإطارات i-frames).

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
الطول

تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل.

النوع: رقم
التلقائي: ارتفاع العنصر الذي يحتوي على الصورة
timeline.barLabelStyle

كائن يحدد نمط نص تصنيف الشريط. تكون بهذا التنسيق:

{fontName: <string>, fontSize: <string>}

اطّلِع أيضًا على fontName وfontSize في هذا الجدول.

Type: كائن
الإعداد التلقائي: قيمة خالية
timeline.colorByRowLabel

في حال ضبطها على "صحيح"، يتم تلوين كل شريط في الصف نفسه. والإعداد التلقائي هو استخدام لون واحد لكل تصنيف شريط.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
timeline.groupByRowLabel

وفي حال ضبطها على "خطأ"، يتم إنشاء صف واحد لكل إدخال في dataTable. والطريقة التلقائية هي جمع الأشرطة التي تحمل تصنيف الصف نفسه في صف واحد.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
timeline.rowLabelStyle

كائن يحدد نمط نص تصنيف الصف. تكون بهذا التنسيق:

{color: <string>, fontName: <string>, fontSize: <string>}

يمكن أن تكون السمة color أي سلسلة لون HTML، على سبيل المثال 'red' أو '#00cc00'، ويمكنك أيضًا الاطّلاع على fontName وfontSize في هذا الجدول.

Type: كائن
الإعداد التلقائي: قيمة خالية
timeline.showBarLabels

في حال ضبطها على "خطأ"، يتم حذف تصنيفات الأشرطة. ويكون الإعداد التلقائي هو عرضها.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
timeline.showRowLabels

وفي حال ضبطها على "خطأ"، يتم حذف تصنيفات الصفوف. ويكون الإعداد التلقائي هو عرضها.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
timeline.singleColor

جميع الألوان متطابقة. يتم تحديدها كقيمة سداسية عشرية (مثل "#8d8").

النوع: سلسلة
الإعداد التلقائي: قيمة خالية
tooltip.isHtml

يجب ضبط القيمة على false لاستخدام تلميحات الأدوات المعروضة بتنسيق SVG (بدلاً من العرض بتنسيق HTML). راجِع تخصيص محتوى التلميح للحصول على مزيد من التفاصيل.

ملاحظة: لا يتيح العرض المرئي للرسم البياني الفقاعي تخصيص محتوى تلميح HTML من خلال دور بيانات عمود التلميح.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
tooltip.trigger

تفاعل المستخدِم الذي يتسبب في عرض التلميح:

  • "Focus" (التركيز): سيتم عرض التلميح عندما يمرِّر المستخدم مؤشر الماوس فوق العنصر.
  • 'none' - لن يتم عرض التلميح.
النوع: سلسلة
تلقائي: "التركيز"
العرض

عرض الرسم البياني بالبكسل

النوع: رقم
الإعداد التلقائي: عرض العنصر المتضمّن

الطُرق

الطريقة
draw(data, options)

لرسم الرسم البياني. لا يقبل الرسم البياني طلبات الطُرق الإضافية إلا بعد تنشيط حدث ready. Extended description.

نوع الإرجاع: لا شيء
clearChart()

يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له.

نوع الإرجاع: لا شيء
getSelection()

تعرض صفيفًا من الكيانات المحددة في الرسم البياني. الكيانات القابلة للاختيار هي أشرطة وإدخالات وسائل الإيضاح والفئات. بالنسبة إلى هذا الرسم البياني، يمكن اختيار كيان واحد فقط في أي وقت محدّد. Extended description .

نوع الإرجاع: مصفوفة من عناصر الاختيار

الأحداث

الاسم
error

يتم إطلاقه عند حدوث خطأ عند محاولة عرض الرسم البياني.

الخصائص: المعرّف والرسالة
onmouseover

يتم الإطلاق عندما يمرر المستخدم الماوس فوق كيان مرئي. ينقل فهارس الصفوف والأعمدة لعنصر جدول البيانات المقابل. يرتبط شريط بخلية في جدول البيانات وإدخال وسيلة إيضاح في عمود (فهرس الصف فارغ) وفئة إلى صف (فهرس العمود فارغ).

الخصائص: الصف والعمود
onmouseout

يتم إطلاقها عندما يوجِّه المستخدم الماوس بعيدًا عن كيان مرئي. ينقل فهارس الصفوف والأعمدة لعنصر جدول البيانات المقابل. يرتبط شريط بخلية في جدول البيانات وإدخال وسيلة إيضاح في عمود (فهرس الصف فارغ) وفئة إلى صف (فهرس العمود فارغ).

الخصائص: الصف والعمود
ready

الرسم البياني جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد أداة معالجة لهذا الحدث قبل استدعاء طريقة draw، وعدم الاتصال بها إلا بعد تنشيط الحدث.

الخصائص: غير محدّدة
select

يتم الإطلاق عندما ينقر المستخدم على عنصر مرئي. لمعرفة ما تم اختياره، يمكنك الاتصال بالرقم getSelection().

الخصائص: غير محدّدة

سياسة البيانات

تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.