Google 用于从同一电子表格创建多个图表和表格但不同列的不同范围的应用脚本

Question

目前，我在使用 google 应用程序脚本从同一电子表格的不同范围和不同列创建多个图表和表格时遇到困难。

这是我的数据源的图片

DATA

我设法创建了多个 table 和图表，其中的数据源来自同一电子表格的不同范围但来自同一列。表格以红色和蓝色突出显示。但是我有第三个 table，它来自同一个电子表格中的不同列，它没有根据我的代码发布。

这是我的代码

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;
   
}

折线图倍数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>

我对这个脚本很陌生。非常感谢任何形式的帮助。

Answer 1

我不确定这是否对你有帮助，但欢迎你从中收获任何你能收获的东西。我正在研究 Google Finance，并通过对 15 只股票的 Google Finance cells 进行 5 分钟采样来收集一些数据。所有股票的图表毫无意义，所以我通过切换列为每只股票创建了一个图表。我也有兴趣获取图表图像，但必须等到最后一个图表呈现之后，这样我才有了从最后一个图表获得回调的侦听器。

这是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>

这是唯一的 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;
}

这是数据集的样子：

Answer 2

代码正确。问题出在数据源上。最初，日期 3 - 范围 H10:M16 的数据源没有列 ID。添加图像中突出显示的列 ID 后，它起作用了。

Google 用于从同一电子表格创建多个图表和表格但不同列的不同范围的应用脚本

Google app script to create Multiple Charts & Tables from same spreadsheet but different range from different column

html

javascript

web-applications

multiple-tables

google-apps-script