Как добавить горизонтальную полосу прокрутки в Google Gantt Chart? - PullRequest
Новая
       6

Как добавить горизонтальную полосу прокрутки в Google Gantt Chart?

0 голосов
/ 13 июня 2018

На моей веб-странице есть диаграмма Google Gantt.Но я не могу прокрутить его по горизонтали, если у меня есть больше предметов.

Я пытался: 

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

После того, как сам этот график исчез.Как добавить полосу прокрутки ???

Ссылка на график: LINK

1 Ответ

0 голосов
/ 13 июня 2018

добавить 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>
...