问题描述
因此,我了解如何使用
正如你所看到的,我显然是一位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);
}
$ b $如果电子表格数据与为图表,
不需要数据操作。
这似乎就是这种情况。
请参阅以下工作片段,
'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表格中的数据绘制甘特图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!