拉取 Google Sheets 作为 Google Gantt Chart 的数据源

Question

我正在尝试从 Google 表格中提取数据并将其用作我的甘特图的来源。 我已经按照 Google Charts 文档中的示例为 columnchart 提取表格数据，但不确定是否需要更多自定义。

我对 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);
}

Answer 1

首先， callback应该是 --> drawGID

而不是 --> drawChart

---

接下来，注意甘特图的数据格式

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

---

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

使用电子表格（ 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>

Answer 2

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