جدول زمانی

  1. بررسی اجمالی
  2. یک مثال ساده
  3. برچسب زدن به میله ها
  4. یک مثال پیشرفته
  5. قرار دادن میله ها در یک ردیف
  6. تغییر فونت ها
  7. کنترل رنگ ها
  8. همپوشانی خطوط شبکه
  9. سفارشی کردن نکات ابزار
  10. بارگذاری
  11. فرمت داده
  12. گزینه های پیکربندی
  13. مواد و روش ها
  14. مناسبت ها
  15. خط مشی داده

بررسی اجمالی

جدول زمانی نموداری است که نحوه استفاده از مجموعه ای از منابع را در طول زمان نشان می دهد. اگر یک پروژه نرم افزاری را مدیریت می کنید و می خواهید نشان دهید چه کسی چه کاری و چه زمانی انجام می دهد، یا اگر در حال سازماندهی یک کنفرانس هستید و نیاز به برنامه ریزی اتاق های جلسه دارید، یک جدول زمانی اغلب یک انتخاب تجسم معقول است. یکی از انواع محبوب جدول زمانی، نمودار گانت است.

توجه: در اشیاء تاریخ جاوا اسکریپت، ماه‌ها از صفر شروع می‌شوند و تا یازده افزایش می‌یابند، ژانویه ماه صفر و دسامبر ماه یازدهم است. برای اطلاعات بیشتر به صفحه تاریخ و زمان مراجعه کنید.

یک مثال ساده

فرض کنید می‌خواهید زمانی را که روسای جمهور آمریکا دوره‌های خود را سپری کردند، طرح ریزی کنید. در اینجا، "منابع" روسای جمهور هستند و می توانیم دوره هر رئیس جمهور را به عنوان یک نوار ترسیم کنیم:

با نگه داشتن ماوس روی یک نوار، یک راهنمای ابزار با اطلاعات دقیق تر ظاهر می شود.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="timeline" style="height: 180px;"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="timeline" style="height: 180px;"></div> 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); }

پس از بارگیری بسته timeline لاین و تعریف یک فراخوان برای رسم نمودار در هنگام رندر شدن صفحه، drawChart() یک google.visualization.Timeline() را معرفی می کند و سپس یک dataTable را با یک ردیف برای هر رئیس پر می کند.

در داخل dataTable ، ستون اول نام رئیس جمهور و ستون دوم و سوم زمان شروع و پایان است. اینها نوع 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 (فعال 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 روی اولین رنگ در لیست تنظیم شده است. (این در مورد تمام نمودارهای گوگل صدق می کند، نه فقط جدول زمانی.)

یکی دیگر از راه های کنترل رنگ های تک تک میله ها استفاده از ستونی با نقش استایل است .

کد افزودن و پر کردن ستون سبک:

<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 ) قرار دهیم تا راهنمای ابزار ما در ستون سوم وجود داشته باشد.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="timeline" style="height: 180px;"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="timeline" style="height: 180px;"></div> 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); }
<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
هدف: برچسب ردیف برچسب نوار (اختیاری) راهنمای ابزار (اختیاری) شروع کنید پایان
نوع داده: رشته رشته رشته شماره یا تاریخ شماره یا تاریخ
نقش: داده ها داده ها راهنمای ابزار داده ها داده ها

گزینه های پیکربندی

نام
متناوب RowStyle

آیا نمودار باید رنگ پس‌زمینه را با شاخص ردیف جایگزین کند یا نه (یعنی رنگ پس‌زمینه ردیف‌های دارای نمایه‌سازی شده را به رنگ تیره‌تر درآورد). اگر غلط باشد، پس زمینه نمودار یک رنگ یکنواخت خواهد بود. اگر درست باشد، پس‌زمینه نمودار با شاخص ردیف، رنگ متناوب را تغییر می‌دهد. (توجه: فعال نسخه 51+)

نوع: بولی
پیش فرض: درست است
اجتناب از OverlappingGridLines

آیا عناصر نمایش (به عنوان مثال، نوارهای یک جدول زمانی) باید خطوط شبکه را مبهم کند یا خیر. اگر نادرست باشد، خطوط شبکه ممکن است به طور کامل توسط عناصر نمایش پوشیده شوند. اگر درست باشد، عناصر نمایش ممکن است تغییر داده شوند تا خطوط شبکه قابل مشاهده باشند.

نوع: بولی
پیش فرض: درست است
رنگ پس زمینه

رنگ پس زمینه برای ناحیه اصلی نمودار. می تواند یک رشته رنگی ساده HTML باشد، برای مثال: 'red' یا '#00cc00' ، یا یک شی با ویژگی های زیر.

نوع: رشته یا شی
پیش فرض: "سفید"
رنگ ها

رنگ هایی که برای عناصر نمودار استفاده می شود. آرایه ای از رشته ها، که در آن هر عنصر یک رشته رنگی HTML است، به عنوان مثال: colors:['red','#004411'] .

نوع: آرایه از رشته ها
پیش فرض: رنگ های پیش فرض
فعال کردن تعامل

آیا نمودار رویدادهای مبتنی بر کاربر را نشان می دهد یا به تعامل کاربر واکنش نشان می دهد. اگر نادرست باشد، نمودار «انتخاب» یا سایر رویدادهای مبتنی بر تعامل را پرتاب نمی‌کند (اما رویدادهای آماده یا خطا را پرتاب می‌کند)، و متن شناور را نمایش نمی‌دهد یا بسته به ورودی کاربر تغییر نمی‌کند.

نوع: بولی
پیش فرض: درست است
نام قلم

صورت فونت پیش‌فرض برای تمام متن‌های نمودار. می‌توانید با استفاده از ویژگی‌های عناصر نمودار خاص، این مورد را لغو کنید.

نوع: رشته
پیش فرض: "Arial"
اندازه فونت

اندازه فونت پیش‌فرض، بر حسب پیکسل، تمام متن‌های نمودار. می‌توانید با استفاده از ویژگی‌های عناصر نمودار خاص، این مورد را لغو کنید.

نوع: شماره
پیش فرض: خودکار
forceIFrame

نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.)

نوع: بولی
پیش فرض: نادرست
ارتفاع

ارتفاع نمودار، بر حسب پیکسل.

نوع: شماره
پیش فرض: ارتفاع عنصر حاوی
timeline.barLabelStyle

یک شی که سبک متن برچسب نوار را مشخص می کند. این فرمت را دارد:

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

همچنین fontName و fontSize در این جدول ببینید.

نوع: شی
پیش فرض: null
timeline.colorByRowLabel

اگر روی true تنظیم شود، هر نوار روی ردیف را یکسان رنگ می کند. پیش فرض استفاده از یک رنگ در هر برچسب نوار است.

نوع: بولی
پیش فرض: نادرست
timeline.groupByRowLabel

اگر روی false تنظیم شود، برای هر ورودی dataTable یک ردیف ایجاد می کند. پیش‌فرض این است که نوارهایی با همان برچسب ردیف در یک ردیف جمع‌آوری شود.

نوع: بولی
پیش فرض: درست است
timeline.rowLabelStyle

یک شی که سبک متن برچسب ردیف را مشخص می کند. این فرمت را دارد:

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

color می تواند هر رشته رنگ HTML باشد، به عنوان مثال 'red' یا '#00cc00' همچنین fontName و fontSize در این جدول ببینید.

نوع: شی
پیش فرض: null
timeline.showBarLabels

اگر روی false تنظیم شود، برچسب های نوار را حذف می کند. پیش فرض این است که آنها را نشان دهید.

نوع: بولی
پیش فرض: درست است
timeline.showRowLabels

اگر روی false تنظیم شود، برچسب های ردیف را حذف می کند. پیش فرض این است که آنها را نشان دهید.

نوع: بولی
پیش فرض: درست است
timeline.singleColor

همه نوارها را یکسان رنگ می کند. به عنوان یک مقدار هگز مشخص شده است (به عنوان مثال، '#8d8').

نوع: رشته
پیش فرض: null
tooltip.isHtml

برای استفاده از راهنمای ابزار SVG رندر شده (به جای رندر HTML) روی false تنظیم کنید. برای جزئیات بیشتر به سفارشی کردن محتوای راهنمای ابزار مراجعه کنید.

توجه: سفارشی‌سازی محتوای راهنمای ابزار HTML از طریق نقش داده ستون راهنمای ابزار توسط تجسم نمودار حباب پشتیبانی نمی‌شود .

نوع: بولی
پیش فرض: درست است
tooltip.trigger

تعامل کاربر که باعث می شود راهنمای ابزار نمایش داده شود:

  • 'focus' - وقتی کاربر روی عنصر قرار می گیرد، راهنمای ابزار نمایش داده می شود.
  • 'none' - راهنمای ابزار نمایش داده نخواهد شد.
نوع: رشته
پیش فرض: "تمرکز"
عرض

عرض نمودار، بر حسب پیکسل.

نوع: شماره
پیش فرض: عرض عنصر حاوی

مواد و روش ها

روش
draw(data, options)

نمودار را رسم می کند. نمودار فراخوانی های متد بیشتر را فقط پس از فعال شدن رویداد ready می پذیرد. Extended description

نوع بازگشت: ندارد
clearChart()

نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند.

نوع بازگشت: ندارد
getSelection()

آرایه ای از موجودیت های نمودار انتخاب شده را برمی گرداند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. برای این نمودار، در هر لحظه می توان تنها یک موجودیت را انتخاب کرد. Extended description

نوع بازگشت: آرایه ای از عناصر انتخابی

مناسبت ها

نام
error

هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود.

ویژگی ها: شناسه، پیام
onmouseover

هنگامی که کاربر روی یک موجودیت بصری حرکت می‌کند فعال می‌شود. شاخص های سطر و ستون عنصر جدول داده مربوطه را به عقب ارسال می کند. یک نوار با یک سلول در جدول داده ها، یک ورودی افسانه به یک ستون (شاخص ردیف تهی است) و یک دسته به یک ردیف (شاخص ستون تهی است) مرتبط است.

خواص: سطر، ستون
onmouseout

زمانی که کاربر از یک موجود بصری دور می‌شود، فعال می‌شود. شاخص های سطر و ستون عنصر جدول داده مربوطه را به عقب ارسال می کند. یک نوار با یک سلول در جدول داده ها، یک ورودی افسانه به یک ستون (شاخص ردیف تهی است) و یک دسته به یک ردیف (شاخص ستون تهی است) مرتبط است.

خواص: سطر، ستون
ready

نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی متد draw ، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید.

خواص: هیچ
select

هنگامی که کاربر روی یک موجودیت بصری کلیک می کند فعال می شود. برای اطلاع از آنچه انتخاب شده است، getSelection() را فراخوانی کنید.

خواص: هیچ

خط مشی داده

همه کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.