簡介
「時間軸」是一個圖表,說明一組資源在一段時間內的使用情形。如果您正在管理軟體專案,且想要說明是誰在做什麼事、是在何時、如何籌辦會議,而且需要安排會議室,則時間表通常都是合理的視覺選擇。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 顏色字串,例如 類型:字串或物件
預設:「white」
|
顏色 |
圖表元素的顏色。字串陣列,其中每個元素都是 HTML 顏色字串,例如: 類型:字串陣列
預設:預設顏色
|
啟用互動功能 |
圖表是否擲回了以使用者為主的事件或回應使用者互動。設為 False 時,圖表不會擲回「選取」或其他以互動為基礎的事件 (但會「擲出就緒」或「錯誤」的事件),而且不會顯示使用者的文字,或是隨著使用者輸入的內容而改變。 類型:布林值
預設:是
|
字型名稱 |
圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:字串
預設:「Arial」
|
字型大小 |
圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:數字
預設:自動
|
ForceIFrame |
在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會以 i-frames 繪製)。 類型:布林值
預設值:false
|
height |
圖表的高度,以像素為單位。 類型:數字
預設:所含元素的高度
|
時間軸 / 標籤標籤樣式 |
指定列標籤文字樣式的物件。格式如下: {fontName: <string>, fontSize: <string>}
另請參閱這個表格中的 類型:物件
預設值:空值
|
時間軸 / 由列列標籤 |
如果設為 True,則資料列中的每個長條都會相同。預設是每個長條圖標籤使用一個顏色。 類型:布林值
預設值:false
|
時間軸標籤 |
如果設為 false,請為每個 類型:布林值
預設:是
|
時間軸 / 標籤標籤樣式 |
指定列標籤文字樣式的物件。格式如下: {color: <string>, fontName: <string>, fontSize: <string>}
類型:物件
預設值:空值
|
時間軸 / 標籤列 |
如果設為 False,系統會略過長條圖標籤。系統會依預設顯示這些參數。 類型:布林值
預設:是
|
時間軸 / 列標籤 |
如果設為 False,系統會略過資料列標籤。系統會依預設顯示這些參數。 類型:布林值
預設:是
|
時間軸/單色 |
所有長條的顏色都相同。指定為十六進位值 (例如「#8d8」)。 類型:字串
預設值:空值
|
tooltip.isHtml |
設定為 注意:「說明圖示圖表」不支援透過工具提示資料欄資料角色自訂 HTML 工具提示內容。 類型:布林值
預設:是
|
tooltip.trigger |
顯示工具提示的使用者互動:
類型:字串
預設值:「focus」
|
width |
圖表的寬度 (以像素為單位)。 類型:數字
預設:內含元素的寬度
|
方法
方法 | |
---|---|
draw(data, options) |
繪製圖表。只有在 傳回類型:無
|
clearChart() |
清除圖表並釋出其分配的所有資源。 傳回類型:無
|
getSelection() |
傳回所選圖表實體的陣列。可選取的實體包括長條、圖例項目和類別。
這張圖表在任何時間點都只能選取一個實體。
傳回類型:選取元素陣列
|
活動
名稱 | |
---|---|
error |
嘗試轉譯圖表時發生錯誤。 屬性:ID、訊息
|
onmouseover |
當使用者將滑鼠遊標移到視覺實體上時觸發。傳回對應資料表元素的列索引和欄索引。長條與資料表內的儲存格相關、與資料欄的圖例項目 (資料列索引為空值),以及列與類別的類別 (欄索引為空值)。 屬性:資料列、資料欄
|
onmouseout |
當使用者離開視覺實體時觸發。傳回對應資料表元素的列索引和欄索引。長條與資料表內的儲存格相關、與資料欄的圖例項目 (資料列索引為空值),以及列與類別的類別 (欄索引為空值)。 屬性:資料列、資料欄
|
ready |
圖表可供外部方法呼叫使用。如果您想要與圖表互動,並在繪製圖表後呼叫方法,請先為這個事件設定監聽器,然後再呼叫 屬性:無
|
select |
使用者點選視覺實體時觸發。如要瞭解所選項目,請呼叫 屬性:無
|
資料政策
系統會處理所有程式碼和資料,並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。