Google 차트 타임 라인 가로 스크롤

Question

나는이 페이지의 첫 번째 예 (https://developers.google.com/chart/interactive/docs/gallery/timeline)와 매우 유사한 타임 라인 차트를 가지고 있습니다.

나는 Y 축 (점심 식사, 먹기, ecc 만들기)에 대한 활동을하고 있으며 X 축에는 시간이 있습니다.

가로 스크롤 및 차트 확대/축소 (이 항목에서 언급 한대로 Google chart horizontal scrollbar)를 활성화하려고합니다. 하지만 나는 그것을 작동시킬 수없는 것 같습니다.

타임 라인 차트에서 가로 스크롤을 사용하는 방법이 있습니까?

감사합니다.

알레산드로

Answer 1

스크롤이나 줌의 Timeline 차트 표준 configuration options 없습니다.

하지만 수평 스크롤

위해 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>

,