将 Google 表格作为 Google 甘特图的数据源答案

【问题标题】：Pulling Google Sheets as data source for Google Gantt Chart将 Google 表格作为 Google 甘特图的数据源
【发布时间】：2017-01-10 17:51:19
【问题描述】：

我正在尝试从 Google 表格中提取数据并将其用作我的Gantt chart 的来源。我已经按照pulling Sheets data for a columnchart 的 Google Charts 文档中的示例进行了操作，但不确定是否需要进行更多自定义。

我对 Javascript 不太熟悉，所以不确定是什么触发了错误。这是JSFiddle中的代码。

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

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

function drawGID() {
  var queryString = encodeURIComponent('SELECT A, B, C, D, E, F, G, H');

  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1f0wxDrEfptRKCRY5pQPu6Dc_ue_tIX_ja5pQO3vXjOY/edit#gid=0&headers=1&tq=' + queryString);
  query.send(handleSampleDataQueryResponse);
}

function handleSampleDataQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }}

function drawChart() {

  var otherData = response.getDataTable();

  var options = {
    height: 275,
    gantt: {
      defaultStartDateMillis: new Date(2015, 3, 28)
    }
  };

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

  chart.draw(otherData, options);
}

【问题讨论】：

标签： javascript charts google-sheets google-visualization

【解决方案1】：

首先，callback 应该是 --> drawGID

而不是 --> drawChart

接下来，注意甘特图的data format

'Start' 和 'End' 日期都是必需的，不能为空，
和电子表格一样

请参阅以下工作 sn-p...

使用电子表格 (otherData) 中的数据构建了一个新数据表，
使用'Duration' 列填写日期

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

function drawGID() {
  var queryString = encodeURIComponent('SELECT A, B, C, D, E, F, G, H');

  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1f0wxDrEfptRKCRY5pQPu6Dc_ue_tIX_ja5pQO3vXjOY/edit#gid=0&headers=1&tq=' + queryString);
  query.send(handleSampleDataQueryResponse);
}

function handleSampleDataQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var otherData = response.getDataTable();
  var ganttData = new google.visualization.DataTable({cols: [
    {type: 'string', label: 'Task Id'},
    {type: 'string', label: 'Task Name'},
    {type: 'string', label: 'Resource'},
    {type: 'date', label: 'Start'},
    {type: 'date', label: 'End'},
    {type: 'number', label: 'Duration'},
    {type: 'number', label: '% Complete'},
    {type: 'string', label: 'Dependencies'}
  ]});

  var duration = 0;
  var startDate = new Date(2016, 0, 1);
  var endDate;
  for (var i = 0; i < otherData.getNumberOfRows(); i++) {
    startDate = new Date(startDate.getTime() + duration);
    duration += otherData.getValue(i, 5);
    endDate = new Date(startDate.getTime() + duration);
    ganttData.addRow([
      otherData.getValue(i, 0),
      otherData.getValue(i, 1),
      otherData.getValue(i, 2),
      startDate,
      endDate,
      otherData.getValue(i, 5),
      parseFloat(otherData.getValue(i, 6)),
      otherData.getValue(i, 7)
    ]);
  }

  var options = {
    height: 275,
    gantt: {
      defaultStartDateMillis: new Date(2015, 3, 28)
    }
  };

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

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

【讨论】：

【解决方案2】：

以下 Google 项目允许您以甘特图的形式查看 Google 电子表格： https://github.com/google/ezgantt

【讨论】：