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

【问题标题】：How to add more than one Google chart on a page from the same Google spreadsheet but different range如何在同一 Google 电子表格但范围不同的页面上添加多个 Google 图表
【发布时间】：2018-12-06 07:19:18
【问题描述】：

我的 Google 表格数据如下所示

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

我设法创建了之前从同一数据范围获得的单个表格和折线图，但是 我在创建 2 个不同的表格时遇到了困难，这些表格的数据源来自同一个谷歌表格但不同的单元格范围。

这是我的代码。

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

我很陌生，不确定如何继续。

【问题讨论】：

标签： javascript google-apps-script charts google-visualization linechart

【解决方案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>

【讨论】：