時間軸

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

簡介

「時間軸」是一個圖表，說明一組資源在一段時間內的使用情形。如果您正在管理軟體專案，且想要說明是誰在做什麼事、是在何時、如何籌辦會議，而且需要安排會議室，則時間表通常都是合理的視覺選擇。Gantt 圖表是常用的時間軸類型之一。

注意：在 JavaScript Date 物件中，月份會從零開始建立索引，並往上計算 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>

進階範例

為了讓我們的時間軸變得更加複雜，讓我們在圖表中加入副總統和州務長。John Adams 在擔任總統之前是副董事會

在時間軸中，即使資源出現在多個資料列中，資源的顏色仍會相同，因此在下表中，每個使用者均使用相同的顏色。

某些狀態的密鑰非常短，但時間很短，因此這張圖表適合使用標籤測試。如果標籤過大，導致標籤因長條大小而被縮短或省略。使用者只要將滑鼠遊標懸停在長條上，就能查看工具提示資訊。

時間軸會依序排列資料列 (在總統的職位頂端)。不過，長條的版面配置只能根據開始和結束時間決定，因此交換 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 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 欄
用途： 第 列標籤 長條圖 (選填) 工具提示 (選填) 啟動 結尾
資料類型： string string string 數字或日期 數字或日期
角色： 資料 資料 工具提示 資料 資料

 

設定選項

名稱
變更列樣式

圖表是否應依列索引替代背景顏色 (亦即，已建立索引的列的色調將色調顏色改為較深的色調)。如為 false，圖表背景將為統一的顏色。如為 true，則圖表背景會將資料列色調替代資料列索引。(注意：使用中的 v51 以上版本)

類型：布林值
預設：是
避免過度重疊的 GridLine

顯示元素 (例如時間軸中的長條) 是否應遮蓋格線。如果為 false，格線可以被顯示元素完全覆蓋。如果為 true，系統可能會變更顯示元素，讓格線顯示出來。

類型：布林值
預設：是
backgroundColor

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

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

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

類型：字串陣列
預設：預設顏色
啟用互動功能

圖表是否擲回了以使用者為主的事件或回應使用者互動。設為 False 時，圖表不會擲回「選取」或其他以互動為基礎的事件 (但會「擲出就緒」或「錯誤」的事件)，而且不會顯示使用者的文字，或是隨著使用者輸入的內容而改變。

類型：布林值
預設：是
字型名稱

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

類型：字串
預設：「Arial」
字型大小

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

類型：數字
預設：自動
ForceIFrame

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

類型：布林值
預設值：false
height

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

類型：數字
預設：所含元素的高度
時間軸 / 標籤標籤樣式

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

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

另請參閱這個表格中的 fontName 和 fontSize。

類型：物件
預設值：空值
時間軸 / 由列列標籤

如果設為 True，則資料列中的每個長條都會相同。預設是每個長條圖標籤使用一個顏色。

類型：布林值
預設值：false
時間軸標籤

如果設為 false，請為每個 dataTable 項目建立一個資料列。預設設定是將具有相同資料列標籤的長條收集到一列。

類型：布林值
預設：是
時間軸 / 標籤標籤樣式

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

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

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

類型：物件
預設值：空值
時間軸 / 標籤列

如果設為 False，系統會略過長條圖標籤。系統會依預設顯示這些參數。

類型：布林值
預設：是
時間軸 / 列標籤

如果設為 False，系統會略過資料列標籤。系統會依預設顯示這些參數。

類型：布林值
預設：是
時間軸/單色

所有長條的顏色都相同。指定為十六進位值 (例如「#8d8」)。

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

設定為 false，即可使用 SVG 轉譯 (而非 HTML 轉譯) 工具提示。詳情請參閱自訂工具提示內容。

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

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

顯示工具提示的使用者互動：

  • 「focus」：當滑鼠遊標懸停在元素上時，就會顯示工具提示。
  • [無]：不顯示工具提示。
類型：字串
預設值：「focus」
width

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

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

方法

方法
draw(data, options)

繪製圖表。只有在 ready 事件觸發後，圖表才會接受進一步呼叫方法。Extended description。

傳回類型：無
clearChart()

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

傳回類型：無
getSelection()

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

傳回類型：選取元素陣列

活動

名稱
error

嘗試轉譯圖表時發生錯誤。

屬性：ID、訊息
onmouseover

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

屬性：資料列、資料欄
onmouseout

當使用者離開視覺實體時觸發。傳回對應資料表元素的列索引和欄索引。長條與資料表內的儲存格相關、與資料欄的圖例項目 (資料列索引為空值)，以及列與類別的類別 (欄索引為空值)。

屬性：資料列、資料欄
ready

圖表可供外部方法呼叫使用。如果您想要與圖表互動，並在繪製圖表後呼叫方法，請先為這個事件設定監聽器，然後再呼叫 draw 方法，並且只在事件觸發後呼叫這些方法。

屬性：無
select

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

屬性：無

資料政策

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