我如何使用Google Charts来使用Google表格中的数据绘制甘特图？ [英] How can I use Google Charts to draw a Gantt chart using data from a Google Sheet?
本文介绍了我如何使用Google Charts来使用Google表格中的数据绘制甘特图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我了解如何使用 Google图表Google图表
a>通过手动输入数据（如示例中所示），但我无法弄清楚如何从Google表格中提取数据。最令人困惑的部分是我能够也无法从示例代码中移除的部分，如： data.addRows（[
['Research'，'查找来源'，null，
新日期（2015,0,1），新日期（2015,0,5），null，100，null]，
''Write'，'Write paper'，'write'，
null，new Date（2015,0,9），daysToMilliseconds（3），25'Research，Outline']，
['' Cite'，'Create Bibliography'，'write'，
null，new Date（2015,0,7），daysToMilliseconds（1），20，'Research']，
['Complete'，'手写纸'，'完整'，
null，新日期（2015,0,10），daysToMilliseconds（1），0，'Cite，Write']，
['Outline'，'Outline $'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'$'
和
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Task ID'）;
data.addColumn（'string'，'任务名称'）;
data.addColumn（'string'，'Resource'）;
data.addColumn（'date'，'开始日期'）;
data.addColumn（'date'，'结束日期'）;
data.addColumn（'number'，'Duration'）;
data.addColumn（'数字'，'完成百分比'）;
data.addColumn（'string'，'Dependencies'）;
以及我如何正确地对查询表进行查询，然后绘制图表。我猜，这基本上意味着我不知道下蹲，并且从我的眼睛里流血，试图理解这一点......
以下是我的数据： Google表格
正如你所看到的，我显然是一位JS文盲。任何帮助将不胜感激。以下是我可怕的c& p frankencode：
google.charts.load（'current'，{'packages'：[''甘特']}）;
google.charts.setOnLoadCallback（drawChart）;
函数daysToMilliseconds（天）{
返回天数* 24 * 60 * 60 * 1000;
函数drawChart（）{
var query = new google.visualization.Query（'https://docs.google.com/spreadsheets/d/1M3wQgKg3JBF6_hzv1xWONP7HWVYoOvJ1jPbB27IUg94/gviz / TQ GID = 0&安培;头= 1' ）;
query.setQuery（'SELECT A，B，C，D，E，F，G，H'）;
query.send（response（））{
if（response.isError（））{
alert（'Error in query：'+ response.getMessage（）+''+ response。 getDetailedMessage（））;
return;
};
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'任务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 （'数字'，'完成百分比'）;
data.addColumn（'string'，'Dependencies'）;
var data = response.getDataTable（）;
var options = {
height：275
};
var chart = new google.visualization.Gantt（document.getElementById（'chart_div'））;
chart.draw（data，options）;
}
解决方案
-formatrel =nofollow noreferrer>数据格式为图表，
不需要数据操作。
这似乎就是这种情况。
请参阅以下工作片段，
'Outline' code>依赖于'写'似乎甩开了一点路径...
< script src =https://www.gstatic.com/charts>
So I kind of understand how to use the Google Charts Google Chart by manually entering data as shown in the example, but I just can't figure out how to ingest data from Google Sheets. The most confusing parts are what I can and can't remove from the example's code, like:
data.addRows([
['Research', 'Find sources', null,
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper', 'write',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography', 'write',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper', 'complete',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper', 'write',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
and
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');
As well how I can properly make the query to my sheet and then draw the chart. Which, I guess, basically means I don't know squat and am bleeding from my eyes trying to make sense of this...
Here is my data: Google Sheets
As you can see, I'm clearly a JS illiterate. Any help is greatly appreciated. Below is my awful c&p frankencode:
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1M3wQgKg3JBF6_hzv1xWONP7HWVYoOvJ1jPbB27IUg94/gviz/tq?gid=0&headers=1');
query.setQuery('SELECT A, B, C, D, E, F, G, H');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
};
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');
var data = response.getDataTable();
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
解决方案
if the spreadsheet data matches the data format for the chart,
no data manipulation is required.
which appears to be the case here...
see following working snippet,
the 'Outline' dependency on 'Write' seems to throw off the path a little...
google.charts.load('current', {
callback: drawChart,
packages: ['gantt']
});
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1M3wQgKg3JBF6_hzv1xWONP7HWVYoOvJ1jPbB27IUg94/gviz/tq?gid=0&headers=1');
query.send(function (response) {
if (response.isError()) {
console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
};
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(response.getDataTable(), options);
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于我如何使用Google Charts来使用Google表格中的数据绘制甘特图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
