Google应用脚本可从同一电子表格创建多个图表，但不同列的范围不同
[英]Google app script to create Multiple Charts & Tables from same spreadsheet but different range from different column
问题描述
Currently i am facing difficulty creating Multiple Charts & Tables from same spreadsheet different range and different column using the google app script. 
目前，我面临使用Google App脚本从同一电子表格，不同范围和不同列创建多个图表的困难。
Here is the image of my data source 这是我的数据源的图像
I managed to create multiple tables and charts with data source coming from same spreadsheet different range but from the same column. 我设法创建了多个表和图表，其数据源来自同一电子表格，但范围不同，但来自同一列。 Tables highlighted in red and blue. 表格以红色和蓝色突出显示。 But i have a 3rd table which is from a different column in same spreadsheet which is not getting published based on my code. 但是我有一个第三张表，它是来自同一电子表格中的不同列，它不会根据我的代码发布。
here is my code 这是我的代码
code.gs code.gs
function doGet(e) { return HtmlService .createTemplateFromFile("Line Chart multiple Table") .evaluate() .setTitle("Google Spreadsheet Chart") .setSandboxMode(HtmlService.SandboxMode.IFRAME); } function getSpreadsheetData() { var ssID = "1qkDFf4sYMgPZhGAoEf7vrXbBPmno6Tt4UT_zd5M8xLo"; var sheet = SpreadsheetApp.openById(ssID).getSheets()[0]; var firstrow = 6; //11th row var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow + 1, 6); var data1 = range.getValues(); var data2 = sheet.getRange('A1:F5').getValues(); var data3 = sheet.getRange('H10:M16').getValues(); rows = {data1: data1, data2: data2, data3: data3}; return rows; }
Line Chart multiple Table.HTML 折线图多个Table.HTML
<!DOCTYPE html> <html> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="lineoverall"></div> <div id="linechartweekly"></div> <div id="table1"></div> <div id="table2"></div> <div id="table3"></div> <script> google.charts.load('current', {'packages':['table']}); google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(getSpreadsheetData); function getSpreadsheetData() { google.script.run.withSuccessHandler(drawChart).getSpreadsheetData(); } function drawChart(rows) { var data1 = google.visualization.arrayToDataTable(rows.data1, false); var data2 = google.visualization.arrayToDataTable(rows.data2, false); var data3 = google.visualization.arrayToDataTable(rows.data3, false); var options = { title: 'SPC Chart', legend: 'none', chartArea: { width: '60%' }, vAxis: { textStyle: { fontFamily: 'Arial', fontSize: 12 } } }; var table2 = new google.visualization.Table(document.getElementById("table2")); table2.draw(data2, {showRowNumber: false, width: '50%', height: '100%'}); var chart1 = new google.visualization.LineChart(document.getElementById("lineoverall")); chart1.draw(data1, options); var table1 = new google.visualization.Table(document.getElementById("table1")); table1.draw(data1, {showRowNumber: false, width: '50%', height: '100%'}); var table3 = new google.visualization.Table(document.getElementById("table3")); table3.draw(data3, {showRowNumber: false, width: '50%', height: '100%'}); var chart2 = new google.visualization.LineChart(document.getElementById("linechartweekly")); chart2.draw(data3, options); } </script> </body> </html>
I am quiet new this scripting. 我对这个脚本很安静。 Any sort of help is much appreciated. 任何帮助都将不胜感激。
2 个解决方案
解决方案1
0 2018-12-17 05:44:20
I'm not sure if this will help you but your welcome to reap whatever you can from it. 我不确定这是否对您有帮助，但欢迎您从中获得一切。 I was playing around with Google Finance and collected some data by taking 5 minute samples of Google Finance cells of 15 stocks. 我在玩Google财经，并通过对15种股票的Google财经单元进行了5分钟采样来收集了一些数据。 A chart of all of the stocks was rather pointless so I created a chart for each one by just switching columns. 所有股票的图表都没有意义，因此我仅通过切换列就为每个股票创建了一张图表。 I was also interested in getting the chart images but had to wait until after the last chart was rendered so I have listener that gets a callback from the last chart. 我也对获取图表图像感兴趣，但是不得不等到最后一个图表呈现之后，这样我才有侦听器从上一个图表中获取回调。
Here's the HTML: 这是HTML：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Data Dialog</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var rCB=false;
var chartA=[];
var gdObj={};
$(function(){
google.script.run
.withSuccessHandler(updateSelect)
.getDataSheetsArray();
});
function updateSelect(vA){
var id='sel1';
var select = document.getElementById(id);
select.options.length = 1;
for(var i=0;i<vA.length;i++)
{
select.options[i+1] = new Option(vA[i],vA[i]);
}
}
function drawCharts(){
do{
//nothing
}while(!rCB);
var page=$('#sel1').val();
google.script.run
.withSuccessHandler(function(dObj){
gdObj=dObj;
chartA=[];
$('#charts').html('');
for(var i=0;i<dObj.dataSetKeyA.length;i++){
var data = new google.visualization.DataTable();
data.addColumn('string',dObj.dataSetHeaderA[i][0]);
data.addColumn('number',dObj.dataSetHeaderA[i][1]);
data.addRows(dObj[dObj.dataSetKeyA[i]]);
var divId='div-' + i;
$("#charts").append('<div id="' + divId + '" style="border:1px solid black;margin:0 0 2px 0;"></div>');
var options={
title:dObj[dObj.dataSetHeaderA[i][1]],
fontSize: 14,
fontName: 'Roman',
width:600,
height:300,
pointSize:4,
stroke:'#000',
strokeWidth:2,
hAxis:{slantedText:true,slantedTextAngle:70,textStyle:{color:'#333300',fontName:'Verdana',fontSize:8,bold:true}},
legend:{position:'top'},
chartArea:{left:75,top:75,width:'80%',height:'40%'},
vAxes:[{title:'Stock Price',titleTextStyle:{color:'#0000CC',fontName:'Verdana',fontSize:12,bold:true,italic:false},textStyle:{color:'#CC0000',fontName:'Verdana',fontSize:10,bold:true,italic:false}}]
};
var chart=new google.visualization.LineChart(document.getElementById(divId));
if(i==dObj.dataSetKeyA.length-1){
google.visualization.events.addListener(chart, 'ready', getImages);
}
chartA.push([chart,divId]);
chart.draw(data,options);
}
})
.getDataSets(page);
}
function getImages(){
var chtImgObj={};
chtImgObj['keyA']=[];
for(var j=0;j<chartA.length;j++){
chtImgObj.keyA.push(gdObj.dataSetHeaderA[j][1]);
chtImgObj[gdObj.dataSetHeaderA[j][1]]=chartA[j][0].getImageURI();
//document.getElementById(chartA[j][1]).innerHTML='<img src="' + chartA[j][0].getImageURI() + '" />';
console.log('\nTicker Symbol: %s\n URI: %s\n',gdObj.dataSetHeaderA[j][1],chartA[j][0].getImageURI());
}
/*
google.script.run
.withSuccessHandler(function(){alert("Document has charts.");})
.addToDoc(chtImgObj);
*/
}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function(){rCB=true;});
console.log('MyCode');
</script>
</head>
<body>
<div id="wrapper">
<div id="controls">
<select id="sel1" onchange="drawCharts();">
<option value="" selected>Select Sheet By Name</option>
</select>
</div>
<div id="charts"></div>
</div>
</body>
</html>
And this is the only GS: 这是唯一的GS：
function getDataSets(shtName){
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName(shtName);
var rg=sh.getDataRange();
var vA=rg.getValues();
var dObj={};
var dataSetKeyA=[];
var dataSetHeaderA=[];
for(var c=1;c<vA[0].length;c++){
var vB=[];
dataSetHeaderA.push([vA[0][0],vA[0][c]]);
for(var i=1;i<vA.length;i++){
vB.push([vA[i][0].slice(11),vA[i][c]]);
}
var dataSetKey='TimeStampAndColumn' + Number(c+1);
dObj[dataSetKey]=vB;
dataSetKeyA.push(dataSetKey);
}
dObj['dataSetKeyA']=dataSetKeyA;
dObj['dataSetHeaderA']=dataSetHeaderA;
sh=ss.getSheetByName('StockPrices');
rg=sh.getRange(1,2,2,sh.getLastColumn()-1);
var vC=rg.getValues();
for(var i=0;i<vC[0].length;i++){
dObj[vC[0][i]]=vC[1][i];
}
return dObj;
}
This is what a dataset looks like: 这是数据集的样子：
解决方案2
0 已采纳 2018-12-21 18:55:07
The Code is correct. 守则是正确的。 The issue was with the Data source. 问题出在数据源上。 Initially, the data source for Date 3 - Range H10:M16 did not have Column ID. 最初，日期3-范围H10：M16的数据源没有列ID。 After Adding the column ID as highlighted in the image, It worked. 添加图像中突出显示的列ID之后，它可以工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.