Google Vis：带有奇数线的甘特图答案

【问题标题】：Google Vis: Gantt Chart with odd linesGoogle Vis：带有奇数线的甘特图
【发布时间】：2016-01-12 14:41:59
【问题描述】：

试图创建甘特图但线条很奇怪：

google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', '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.addRows([
    ['Project', 'Project 1', null, new Date(2015, 0, 1), new Date(2015, 6, 5), null,  100,  null],
    ['Task1', 'Task 1', 'Tarefa', new Date(2015, 0, 1), new Date(2015, 2, 5), null, 20, 'Project'],
    ['Task2', 'Task 2', 'Tarefa', new Date(2015, 2, 1), new Date(2015, 3, 5), null, 60, 'Project'],
    ['Task3', 'Task 3', 'Tarefa', new Date(2015, 4, 1), new Date(2015, 5, 5), null, 40, 'Project']
  ]);

  var options = {
    height: 475
  };

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

  chart.draw(data, options);
}

【问题讨论】：

标签： google-visualization

【解决方案1】：

您提供给图表的数据需要更正。
所有任务都依赖于整个项目，该项目在所有任务之后结束。
您可以删除依赖项，或将项目结束日期缩短到第一个任务结束之前。

google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', '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.addRows([
    ['Project', 'Project 1', null, new Date(2015, 0, 1), new Date(2015, 6, 5), null,  100,  null],
    ['Task1', 'Task 1', 'Tarefa', new Date(2015, 0, 1), new Date(2015, 2, 5), null, 20, null],
    ['Task2', 'Task 2', 'Tarefa', new Date(2015, 2, 1), new Date(2015, 3, 5), null, 60, null],
    ['Task3', 'Task 3', 'Tarefa', new Date(2015, 4, 1), new Date(2015, 5, 5), null, 40, null]
  ]);

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

  chart.draw(data, {});
  
  drawChart2();
}

function drawChart2() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', '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.addRows([
    ['Project', 'Project 1', null, new Date(2015, 0, 1), new Date(2015, 0, 9), null,  100,  null],
    ['Task1', 'Task 1', 'Tarefa', new Date(2015, 0, 1), new Date(2015, 2, 5), null, 20, 'Project'],
    ['Task2', 'Task 2', 'Tarefa', new Date(2015, 2, 1), new Date(2015, 3, 5), null, 60, 'Project'],
    ['Task3', 'Task 3', 'Tarefa', new Date(2015, 4, 1), new Date(2015, 5, 5), null, 40, 'Project']
  ]);

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

  chart.draw(data, {});
}

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

【讨论】：