Question

我的Google表格数据看起来像这样

我正在尝试根据数据创建一个包含2个表和一个折线图的仪表板。

我设法创建了一个早先从相同数据范围获得的单个表格和折线图，但是 我很难创建两个不同的表格，这些表格的数据源来自相同的Google工作表，但单元格范围不同。< / em>

这是我的代码。

代码1

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 data1 = sheet.getDataRange({A6: F16}).getValues(); var data2 = sheet.getDataRange({A1: F4}).getValues(); var rows = {data1: data1,data2: data2}; return rows; }

代码2

<!DOCTYPE html> <html> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="line"></div> <div id="table1"></div> <div id="table2"></div> <script> google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.load('current', {'packages':['table']}); 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 options = { title: 'SPC Chart', legend: 'none', chartArea: { width: '60%' }, vAxis: { textStyle: { fontFamily: 'Arial', fontSize: 12 } } }; var chart = new google.visualization.LineChart(document.getElementById("line")); chart.draw(data1, options); var table1 = new google.visualization.Table(document.getElementById("table1")); table1.draw(data1, {showRowNumber: true, width: '50%', height: '100%'}); var table2 = new google.visualization.Table(document.getElementById("table2")); table2.draw(data2, {showRowNumber: false, width: '50%', height: '100%'}); } </script> </body> </html>

我很新，不确定如何进行。

Answer 1

以下代码帮助我实现了我想要的。

代码1

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 data2 = sheet.getRange('A1:F5').getValues();
  var firstrow = 6; // 6th row
  var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow + 1, 6);
  var data1 = range.getValues();
  //var data1 = sheet.getRange('A6:F15').getValues();
  rows   = {data1: data1, data2: data2};

  return rows;

代码2

<!DOCTYPE html>
<html>

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

  <div id="line"></div>
  <div id="table1"></div>
  <div id="table2"></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 data2 = google.visualization.arrayToDataTable(rows.data2, false);
      
      var data1 = google.visualization.arrayToDataTable(rows.data1, 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 chart = new google.visualization.LineChart(document.getElementById("line"));
      chart.draw(data1, options);
      
      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: true, width: '50%', height: '100%'});
      
      

    }
  </script>
</body>

</html>

如何在同一Google电子表格但范围不同的页面上添加多个Google图表

1 个答案: