我正在尝试从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);
}
答案 0 :(得分:0)
首先,callback
应为 - > drawGID
而不是 - > drawChart
接下来,请注意甘特图的data format
'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);
}
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
答案 1 :(得分:0)
以下 Google 项目允许您以甘特图的形式查看 Google 电子表格: https://github.com/google/ezgantt