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

Question

我的 Google Sheet 数据看起来像这样

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

我设法创建了一个 table 和先前从相同数据范围获得的折线图，但是 我在创建 2 个不同的 table 时遇到困难其数据源来自相同 google sheet 但单元格范围不同。

这是我的代码。

代码 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 图表

How to add more than one Google chart on a page from the same Google spreadsheet but different range

javascript

charts

linechart

google-visualization

google-apps-script