谷歌圖表時間軸水平滾動

Question

我有一個時間表圖表，非常類似於此頁面上的第一個示例（ https://developers.google.com/chart/interactive/docs/gallery/timeline ）。

我在Y軸上做活動（做午餐，吃飯，ecc），在X軸上我有時間。

我想啟用水平滾動和圖表放大/縮小（如本主題Google圖表水平滾動條中所述 ）。 但我似乎無法讓它發揮作用。

有沒有辦法在時間線圖表上啟用水平滾動？

非常感謝。

亞歷山德羅

Answer 1

時間軸圖表上沒有用於滾動和縮放的標准配置選項 。

但你可以使用CSS進行水平滾動

在圖表選項中設置特定寬度 - > width: 1200

並將其包裝在寬度較小的容器中 - > overflow-x: scroll;

請參閱以下工作代碼段以獲取示例...

 google.charts.load('current', { callback: drawChart, packages: ['timeline'] }); function drawChart() { var container = document.getElementById('chart_div'); 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, { width: 1200 }); } 

 #chart_wrapper { overflow-x: scroll; overflow-y: hidden; width: 400px; } 

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