![](/img/trans.png)
[英]Ingest data from Google sheets to make a gantt chart on Google script and serve the HTML as web app
[英]Pulling Google Sheets as data source for Google Gantt Chart
我正在嘗試從 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);
}
首先, 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>
以下 Google 項目允許您以甘特圖的形式查看 Google 電子表格: https : //github.com/google/ezgantt
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.