javascript - 如何在谷歌甘特图中添加水平滚动条？

Question

我的网页中有一个谷歌甘特图。但是如果我有更多项目，我将无法水平滚动它。

我试过了 ：

explorer: {axis: 'horizontal', keepInBounds: true}

此图表本身消失后。如何添加滚动条？？？

图表链接：LINK

标签： javascripthtmlchartsgoogle-visualization

Answer 1

将 CSS 添加到图表容器...

#chart_div {
  overflow-x: scroll;
}

你也可以给图表一个特定的宽度......

var options = {
  height: 275,
  width: 1000
};

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['gantt']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['Research', 'Find sources',
     new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
    ['Write', 'Write paper',
     null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
    ['Cite', 'Create bibliography',
     null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
    ['Complete', 'Hand in paper',
     null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
    ['Outline', 'Outline paper',
     null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
  ]);

  var options = {
    height: 275,
    width: 1000
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
  chart.draw(data, options);

  function daysToMilliseconds(days) {
    return days * 24 * 60 * 60 * 1000;
  }
});

#chart_div {
  overflow-x: scroll;
}

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