google gantt dragToZoom / параметры обозревателя - PullRequest
Новая
       37

google gantt dragToZoom / параметры обозревателя

0 голосов
/ 05 апреля 2020

У меня есть диаграмма Ганта (запустите код ниже, чтобы увидеть ее), и я хотел бы иметь увеличение и уменьшение масштаба, чтобы пользователи могли видеть соответствующую информацию в Ганте, который распространяется на несколько лет и множество строк. В этом текущем коде пользователь даже не видит все строки Ганта (я не уверен, почему) Гант, по-видимому (я добавил его в код, и он не работает).

Как я могу сделать эту работу / любые указания по реализации этой функции масштабирования будут полезны. 

 
<html>
	<head>
		<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
		<script type="text/javascript">
    function init () {
        var data_dict = { "tasks": [ { "taskId": "1", "taskName": "Start", "assignedTo": "", "startDate": "2020-04-08T08:20:26.004Z", "endDate": "2020-04-09T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "2", "taskName": "Hiring a patent attorney\n(introduction & Patent harvesting)", "assignedTo": "", "startDate": "2020-04-09T08:20:26.004Z", "endDate": "2020-04-10T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "3", "taskName": "Patent search", "assignedTo": "", "startDate": "2020-04-10T08:20:26.004Z", "endDate": "2020-04-17T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "4", "taskName": "Drafting a patent application", "assignedTo": "", "startDate": "2020-04-17T08:20:26.004Z", "endDate": "2020-05-17T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "5", "taskName": "Israel-Filing an application", "assignedTo": "", "startDate": "2020-05-17T08:20:26.004Z", "endDate": "2020-05-18T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "17", "taskName": "PCT-Filing application", "assignedTo": "", "startDate": "2020-05-18T08:20:26.004Z", "endDate": "2021-09-16T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "21", "taskName": "USA-First office action pendency", "assignedTo": "", "startDate": "2021-09-16T08:20:26.004Z", "endDate": "2023-01-12T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "22", "taskName": "USA-prosecition (as small entity)", "assignedTo": "", "startDate": "2023-01-12T08:20:26.004Z", "endDate": "2025-10-08T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "23", "taskName": "USA-Notice of allowance", "assignedTo": "", "startDate": "2025-10-08T08:20:26.004Z", "endDate": "2026-01-07T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "24", "taskName": "USA-Patent grant", "assignedTo": "", "startDate": "2026-01-07T08:20:26.004Z", "endDate": "2026-01-08T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "25", "taskName": "USA-Time before renewals 1", "assignedTo": "", "startDate": "2026-01-08T08:20:26.004Z", "endDate": "2029-07-08T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "26", "taskName": "USA-Renewals 1 (as small entity)", "assignedTo": "", "startDate": "2029-07-08T08:20:26.004Z", "endDate": "2033-07-07T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "27", "taskName": "USA-Renewals 2 (as small entity)", "assignedTo": "", "startDate": "2033-07-07T08:20:26.004Z", "endDate": "2041-01-03T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "28", "taskName": "USA-Renewals 3 (as small entity)", "assignedTo": "", "startDate": "2041-01-03T08:20:26.004Z", "endDate": "2046-01-02T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" }, { "taskId": "29", "taskName": "USA-Ending protection (20 years) (as small entity)", "assignedTo": "", "startDate": "2046-01-02T08:20:26.004Z", "endDate": "2046-01-03T08:20:26.004Z", "percentCompleted": 100, "dependencies": "" } ] };
        console.log("drawing gantt");
        google.charts.load('current', {'packages':['gantt']});
        google.charts.setOnLoadCallback(function() { drawChart(data_dict); });
}

    function drawChart(data_dict) {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Attorney Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');
      
      data_dict.tasks.forEach(function (task){
      		console.log(task);
            data.addRows([
              [task.taskId, task.taskName, task.assignedTo, new Date(task.startDate), new Date(task.endDate), null, task.percentCompleted, task.dependencies],
            	
            ]);
            
      });

      var options = {
        height: 400,
        gantt: {
          criticalPathEnabled: false,
          innerGridTrack: {fill: "#fcf8f2ff"},
          innerGridDarkTrack: {fill: "#fcf8f2"}
        },
        explorer: { 
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
}
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
	</head>
	<body onload="init();">
		<div id="chart_div"></div>
	</body>
</html>
...