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>