Google時間軸圖表，用於設置分鐘範圍而不是日期

我期待使用Google圖表時間軸來顯示幾分鐘而不是日期。我的意思並不是將時間限制在一天中的幾分鐘內。我的意思是隻顯示0:00作爲開始，然後像5:00這樣的結束時間以幾秒之間的步驟進行。Google時間軸圖表，用於設置分鐘範圍而不是日期

我發現了一些例子（例如，http://almende.github.io/chap-links-library/js/timeline/doc/），但沒有像我在找什麼。所有示例都使用datetime或timeofday，但似乎並沒有將比例限制爲任意時間段。我想要的所有其他功能（縮放，eventlisteners，HTML註釋，JSON輸入等），

是否可以自定義比例尺，以我想要的？甚至隱藏它？

順便說一句 - 這是一個Angular（4）項目，所以我使用angular2-google-chart模塊從TypeScript訪問Google Charts。如果還有另一個更適合的Angular組件，我很樂意聽到它。

來源

2017-05-26 beachCode

只需使用同日所有行 - 開始/結束日期

只調整該日seconds部分對象

new Date(year, month, date, hours, minutes, seconds);

見下工作片斷......

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

 
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: 'Category'}); 
 
    dataTable.addColumn({type: 'date', id: 'Start'}); 
 
    dataTable.addColumn({type: 'date', id: 'End'}); 
 
    dataTable.addRows([ 
 
    ['A', new Date(2017, 4, 26, 10, 0, 1), new Date(2017, 4, 26, 10, 0, 2)], 
 
    ['B', new Date(2017, 4, 26, 10, 0, 2), new Date(2017, 4, 26, 10, 0, 3)], 
 
    ['C', new Date(2017, 4, 26, 10, 0, 3), new Date(2017, 4, 26, 10, 0, 4)] 
 
    ]); 
 
    chart.draw(dataTable, { 
 
    hAxis: { 
 
     format: 'mm:ss', 
 
     maxValue: new Date(2017, 4, 26, 10, 0, 5), 
 
     minValue: new Date(2017, 4, 26, 10, 0, 0) 
 
    } 
 
    }); 
 
}

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

來源

2017-05-26 14:51:53 WhiteHat

真棒。謝謝。我錯過了hAxis選項。它看起來像時間軸的CHAP鏈接庫版本不支持它。 – beachCode

但他們有一個新版本，我必須查看：http://visjs.org/ – beachCode

Google時間軸圖表，用於設置分鐘範圍而不是日期

回答

相關問題