時程

  1. Overview
  2. 簡易範例
  3. 為長條加上標籤
  4. 進階範例
  5. 將長條放在一列
  6. 變更字型
  7. 控制色彩
  8. 重疊格線
  9. 自訂工具提示
  10. 載入中
  11. 資料格式
  12. 設定選項
  13. 方法
  14. 事件
  15. 資料政策

總覽

時間軸是一種圖表，呈現一組資源在不同時間的使用情形。如果您正在管理軟體專案，想要說明這些人是誰，以及何時要做什麼，或者何時要安排會議室，時間軸通常是合理的視覺化選擇。其中一種常用的時間軸類型是「Gantt chart」(甘特圖)。

注意：在 JavaScript Date 物件中，月份會從 0 開始索引，再經過 11 個數字，1 月是 0 個月，而 12 月則是 11。如果時間軸超過一個月，很可能是原因。詳情請參閱「日期和時間」頁面。

簡易範例

假設您想要繪製美國總統任職期間的歷程。此處的「資源」為總統，而我們可以以長條圖顯示每位總統的名詞：

將滑鼠遊標懸停在長條上，即可看見工具提示並提供更多詳細資訊。

載入 timeline 套件並定義在頁面轉譯時繪製圖表的回呼後，drawChart() 方法會將 google.visualization.Timeline() 執行個體化，然後為 dataTable 填入每位總統的一列。

在 dataTable 中，第一欄是總統的姓名，第二欄和第三欄是開始和結束時間。這些項目具有 JavaScript Date 類型，但也可以是純數字。

最後，我們叫用圖表的 draw() 方法，使其在 drawChart() 第一行中宣告 container 時使用的相同 ID (timeline) 顯示在 div 中。

<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 圖表時間軸是可自訂的，在以下範例中，我們會介紹幾種自訂時間軸外觀的常見方式。

為長條加上標籤

除了資料列標籤 (「Washington」、「Adams」、「Jefferson」) 以外，您還可以為個別長條加上標籤。這裡，我們將資料列標籤變更為簡單的數字，並在長條圖上放置每位總統的名字。

在這個程式碼中，我們已在資料中插入新的資料欄來存放長條圖標籤：每位總統的全名。當時間軸 dataTable 中有四個資料欄時，系統會將第一個資料欄解讀為資料列標籤，第二個為長條標籤，第三和第四個資料欄則是開始和結束。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }
</script>

<div id="example2.1" style="height: 200px;"></div>

上述的新資料列標籤提供的資訊並不完善，所以要使用時間軸 showRowLabels 選項加以移除。

根據預設，showRowLabels 為 true。將其設為 false 會移除資料列標籤：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { showRowLabels: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example2.2" style="height: 180px;"></div>

進階範例

為了使時間軸變得更加複雜，讓我們在圖表中新增副總統與州秘書。約翰亞當斯在擔任總裁之前擔任副總 而托馬斯·傑佛森是國家的秘書長，最後擔任副總統。

在時間軸中，即使資源顯示在多個資料列中，也會有相同的顏色，因此在下圖中，每個人都能以一致的顏色表示。

某些狀態的密鑰快取時間非常短，因此這張圖表是良好的標籤測試。如果標籤太大，不能超過長條，則會根據長條大小而遭到縮寫或排除。使用者只要將滑鼠遊標懸停在長條上，就能查看工具提示資訊。

時間軸會按順序排列資料列，這些資料列在州部部長頂部的副總長，因為這就是它們在下列程式碼中的顯示順序。不過，長條的版面配置完全取決於開始和結束時間，因此在 dataTable 中替換兩個狀態的密鑰或兩選總統，並不會對圖表產生影響。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 200px;"></div>

將長條放在一列

與教宗不同，美國一次只能有一位美國總統。因此，如果將所有資料列標示為「總統」，時間軸就會將第一張圖表的三個資料列合併為一列，呈現更簡潔的呈現內容。您可以使用 groupByRowLabel 選項控制這個行為。

以下是預設行為：

現在，讓我們將 groupByRowLabel 設為 false，並將一列分成三列：

用於關閉分組的程式碼：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { groupByRowLabel: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example4.2" style="height: 200px;"></div>

控制色彩

根據預設，Google Charts 會以美觀程度和可讀性 (包括視障者) 呈現最合適的顏色。您可以使用 colorByRowLabel、singleColor、backgroundColor 和 colors 選項調整預設行為。

colorByRowLabel 選項會為同一列上的所有長條都套用相同顏色。如果長條之間有空白處，就很適合選擇這個選項。

colorByRowLabel 預設為 false，因此在此覆寫並設定 true。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room', 'Beginning JavaScript',       new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],
      [ 'Magnolia Room', 'Intermediate JavaScript',    new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0) ],
      [ 'Magnolia Room', 'Advanced JavaScript',        new Date(0,0,0,16,0,0),  new Date(0,0,0,17,30,0) ],
      [ 'Willow Room',   'Beginning Google Charts',    new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Willow Room',   'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Willow Room',   'Advanced Google Charts',     new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.1" style="height: 100px;"></div>

如要讓所有長條都相同的顏色，無論其所在列為何，請使用 singleColor 選項：

在以下程式碼中，singleColor 設為十六進位值，將所有長條的淺綠色上色：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.2" style="height: 150px;"></div>

您可以使用 backgroundColor 選項控制資料列的背景顏色：

backgroundColor 指定為十六進位值。在這個範例中，我們會將其與 colorByRowLabel 配對，以便在會議中顯示軌跡：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      backgroundColor: '#ffd'
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.3" style="height: 150px;"></div>

接著，如要將背景顏色設為依資料列索引交替或不要與之，請使用 alternatingRowStyle 選項 (使用中的 51 以上版本)：

<script src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      alternatingRowStyle: false
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.4" style="height: 150px;"></div>

如要控制個別長條的顏色，請使用 colors 選項：

colors 會採用十六進位值陣列，並依序套用至長條：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.5');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.5" style="height: 150px;"></div>

如果圖表需要的顏色超過所列數量，圖表的行為就像將 singleColor 設為清單中的第一個顏色一樣。(所有 Google 圖表都是如此，而不是只有時間軸)。

另一種控制個別長條顏色的方法，是使用具有樣式角色的資料欄。

要新增並填入樣式欄的程式碼：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

</script>

<div id="example5.6" style="height: 150px;"></div>

變更字型

您可以使用 rowLabelStyle 為每列的標籤選擇字體和字型，而使用 barLabelStyle 為每個列上的標籤選擇。如下所示。

注意：請務必選擇使用者瀏覽器支援算繪的字體。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example6.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
      timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
                     barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example6.1" style="height: 200px;"></div>

您無法設定barLabel文字的顏色。

重疊格線

Google Charts 會微幅調整長條端點，以免遮住時間軸格線。如要避免這種行為，請將 avoidOverlappingGridLines 選項設為 false。

為說明效果，以下兩個範例：第一個使用重疊的格線，第二個沒有重疊的格線。

以下是與格線重疊的程式碼：

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var container = document.getElementById('example7.1');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({ type: 'string', id: 'Room' });
      dataTable.addColumn({ type: 'string', id: 'Name' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addRows([
        [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
        [ 'Magnolia Room', 'App Engine',    new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);

      var options = {
        timeline: { showRowLabels: false },
        avoidOverlappingGridLines: false
      };

      chart.draw(dataTable, options);
    }

  </script>

  <div id="example7.1" style="height: 200px;"></div>

自訂工具提示

您可以在含有五個資料欄的資料表中新增工具提示欄，藉此自訂使用者將滑鼠遊標懸停在時間軸資料列上時看到的內容。如要提供非預設的工具提示，資料表的每列都必須含有下列五個資料欄 (資料列標籤、列標籤、工具提示、起始與結尾)：

將滑鼠遊標懸停在長條上，即可顯示工具提示，其中包含第三欄定義的文字。在這個圖表中，我們必須將第二個資料欄設為虛擬值 (此處為 null)，以便將工具提示存在第三欄中。

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
        dataTable.addColumn({ type: 'string', role: 'tooltip' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams', null, 'John', new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

載入中

google.charts.load 套件名稱為 timeline：

  google.charts.load("current", {packages: ["timeline"]});

視覺呈現的類別名稱為 google.visualization.Timeline：

  var visualization = new google.visualization.Timeline(container);

資料格式

列：表格中的每一列都代表一個時間軸。

資料欄：

  第 0 欄 第 1 欄 第 2 欄 第 3 欄 第 4 欄
用途： 列標籤 長條圖標籤 (選用) 工具提示 (選填) 啟動 結束
資料類型： 字串 字串 字串 號碼或日期 號碼或日期
角色： 資料 資料 工具提示 資料 資料

 

設定選項

名稱
alternatingRowStyle

圖表是否應依列索引替代背景顏色 (亦即即使是已建立索引的資料列，為背景顏色加深色調)。如果值為 False，圖表背景會是一種統一顏色。設為 true 時，圖表背景會依資料列索引交替顯示色調。(注意：有效的 v51+)

類型：布林值
預設值：true
avoidOverlappingGridLines

顯示元素 (例如時間軸中的長條) 是否應遮蓋格線。設為 false 時，格線可能會完全覆蓋在顯示元素上。如果設為 true，系統可能會修改顯示元素，讓格線持續顯示。

類型：布林值
預設值：true
backgroundColor

圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 'red' 或 '#00cc00')，或具有下列屬性的物件。

類型：字串或物件
預設：「white」
顏色

圖表元素要使用的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如：colors:['red','#004411']。

類型：字串陣列
預設：預設顏色
enableInteractivity

圖表是否會擲回以使用者為基礎的事件，或是對使用者互動做出反應。如果設為 False，圖表不會擲回「select」或其他互動型事件 (但「會」擲回已就緒或錯誤的事件)，且不會顯示懸停文字，或根據使用者輸入內容而變更。

類型：布林值
預設值：true
fontName

圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。

類型：字串
預設值：「trigger」
fontSize

圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。

類型：數字
預設：自動
forceIFrame

在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。)

類型：布林值
預設值：false
高度

圖表的高度，以像素為單位。

類型：數字
預設：所含元素的高度
timeline.barLabelStyle

指定長條圖標籤文字樣式的物件。格式如下：

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

另請參閱這個資料表的 fontName 和 fontSize。

類型：物件
預設值：null
timeline.colorByRowLabel

如果設為 true，則在同一列上將每一列的長條顏色相同。預設為每個長條標籤使用一種顏色。

類型：布林值
預設值：false
timeline.groupByRowLabel

如果設為 False，請為每個 dataTable 項目建立一列。預設會將含有相同資料列標籤的長條收集成單一資料列。

類型：布林值
預設值：true
timeline.rowLabelStyle

指定列標籤文字樣式的物件。格式如下：

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

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱此表格中的 fontName 和 fontSize。

類型：物件
預設值：null
timeline.showBarLabels

如果設為 false，則省略長條標籤。預設為顯示。

類型：布林值
預設值：true
timeline.showRowLabels

如果設為 False，系統會省略列標籤。預設為顯示。

類型：布林值
預設值：true
timeline.singleColor

將所有長條都顏色維持相同狀態。以十六進位值 (例如「#8d8」)。

類型：字串
預設值：null
tooltip.isHtml

如要使用 SVG 算繪 (而非 HTML 算繪) 的工具提示，請設為「false」。詳情請參閱「 自訂工具提示內容 」一文。

注意：泡泡圖圖表「不」支援透過工具提示欄資料角色自訂 HTML 工具提示內容。

類型：布林值
預設值：true
tooltip.trigger

觸發工具提示的使用者互動：

  • 「焦點」- 當使用者將遊標懸停在元素上時，就會顯示工具提示。
  • 「無」- 不會顯示工具提示。
類型：字串
預設：「focus」
寬度

圖表的寬度，以像素為單位。

類型：數字
預設：所含元素的寬度

方法

方法
draw(data, options)

繪製圖表。只有在觸發 ready 事件後，圖表才能接受其他方法呼叫。Extended description。

傳回類型：無
clearChart()

清除圖表並釋出所有分配的資源。

傳回類型：無
getSelection()

傳回所選圖表實體的陣列。 可選取的實體包括長條圖、圖例項目和類別。 在這張圖表中，無論何時都只能選取一個實體。 Extended description 。

傳回類型：選取元素的陣列

事件

名稱
error

嘗試算繪圖表時發生錯誤時觸發。

屬性：ID、訊息
onmouseover

在使用者將滑鼠遊標懸停在視覺實體上時觸發。回傳對應資料表元素的列和欄索引。 長條與資料表中的儲存格、資料欄的圖例項目 (資料列索引為空值) 和資料列類別 (欄索引為空值) 相關聯。

屬性：列、欄
onmouseout

在使用者滑鼠遊標移離視覺實體時觸發。回傳對應資料表元素的列和欄索引。 長條與資料表中的儲存格、資料欄的圖例項目 (資料列索引為空值) 和資料列類別 (欄索引為空值) 相關聯。

屬性：列、欄
ready

圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。draw

屬性：無
select

在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 getSelection()。

屬性：無

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。