Google Apps脚本 - 可能的图表类型

Question

我是Google Apps脚本的新手,所以我只是在探索我想实现的目标.

在Google表单中,我需要检索并在单独的文档中显示根据每个表单提交的数据创建的图表.我知道这可以做到.

我遇到的问题是我想要的图表类型似乎在这里不可用.

图表需要显示一个类别和两个值.这可以用条形图来完成,高度是一个值,颜色是另一个值 - 这看起来好像可能但我不确定整个条的颜色是否可以改变.

另一种方法是气泡图,X轴代表类别,Y轴代表一个值,大小代表另一个值 - 但似乎不支持这种类型的图表.

Answer 1

您可以在Google Apps脚本HTML服务中显示Google Visualization API提供的25种以上图表类型中的任何一种.

下面是泡泡图示例的修改版本.我们将从电子表格中提取数据,而不是固定数据.该图表将显示在模式对话框中,作为该电子表格中的附件.

来源数据:

 A         B               C               D            E
ID  Life Expectancy Fertility Rate  Region          Population
CAN      80.66           1.67       North America   33739900
DEU      79.84           1.36       Europe          81902307
DNK      78.6            1.84       Europe           5523095
EGY      72.73           2.78       Middle East     79716203
GBR      80.05           2          Europe          61801570
IRN      72.49           1.7        Middle East     73137148
IRQ      68.09           4.77       Middle East     31090763
ISR      81.55           2.96       Middle East      7485600
RUS      68.6            1.54       Europe         141850000
USA      78.09           2.05       North America  307007000

客户端

设计的其余部分非常简单,但对于不习惯在HTML服务中使用javascript的Apps脚本程序员,尤其是异步函数调用和回调的行为,它就是在客户端代码中发生的事情.最有趣的.这是基本流程.

• 显示带有占位符的html页面,用于可视化.

• 加载外部JavaScript库.我们将使用jQuery(以便于操作DOM),当然还有Google的JavaScript API,也就是jsapi可视化对象.

• 页面加载时,请求回调.我们称之为sendQuery(),因为它将检索我们的电子表格数据.这与仅显示图表的原始示例不同,因为我们不仅仅使用硬编码数据.

• 当jsapi完成加载时,sendQuery()被称为.它请求我们的数据,并将异步响应传递给另一个回调drawSeriesChart().

• 收到数据后drawSeriesChart(),绘制图表.

从电子表格中检索数据的选项

由于我们的可视化将在浏览器(也称为客户端)中运行,因此我们需要从电子表格(也称为服务器端)获取信息.根据您的特定需求,有几种方法可以检索该数据.

1. 通过可视化API查询.

   对于已发布的电子表格,这是一种非常灵活的检索数据的方法.您的客户端js可以指定您感兴趣的数据范围,您可以使用查询语言来操作您将显示的数据,而无需修改源电子表格.

   function sendQuery() {
     var opts = {sendMethod: 'auto'};
     var sheetId = "--- your sheet ID ---";
     var dataSourceUrl = 'https://spreadsheets.google.com/tq?key=%KEY%&pub=1'
                        .replace("%KEY%",sheetId);
   
     var query = new google.visualization.Query(dataSourceUrl, opts);
   
     // Specify query string, if desired.
   
     // Send the query with a callback function.
     query.send(drawSeriesChart);
   }
   

   例如,在您不拥有源数据的情况下很方便

2. 创建一个将提供电子表格数据的Web服务.这种方法使电子表格本身保密.

3. 通过服务器和客户端脚本之间的直接通信google.script.run.这样,电子表格就会保密.此示例非常简单,因为它收集了整个电子表格,但您可以通过过滤,排序或添加更多元数据来扩展它以操作数据.

   function sendQuery() {
   
     // Send the query with a callback function.
     google.script.run
           .withSuccessHandler(drawSeriesChart)
           .getSpreadsheetData();
   }
   

   这要求getSpreadsheetData()在服务器端实现该功能以返回所需数据.这在随后的实际代码中显示.

Code.gs

除了通常用于创建菜单的yada-yada之外,此文件还实现了一个getSpreadsheetData()函数,我们将使用该函数从工作表中检索所有数据.

/**
 * Adds a custom menu with items to show the sidebar and dialog.
 *
 * @param {Object} e The event parameter for a simple onOpen trigger.
 */
function onOpen(e) {
  SpreadsheetApp.getUi()
      .createAddonMenu()
      .addItem('Bubble Chart Example', 'showBubbleEx')
      .addToUi();
}

/**
 * Runs when the add-on is installed; calls onOpen() to ensure menu creation and
 * any other initializion work is done immediately.
 *
 * @param {Object} e The event parameter for a simple onInstall trigger.
 */
function onInstall(e) {
  onOpen(e);
}

/**
 * Opens a dialog for a visualization.
 */
function showBubbleEx() {
  var ui = HtmlService.createTemplateFromFile('BubbleEx')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(450)
      .setHeight(350);
  SpreadsheetApp.getUi().showModalDialog(ui, "Bubble Chart Example");
}

/**
 * Return all data from first spreadsheet as an array. Can be used
 * via google.script.run to get data without requiring publication
 * of spreadsheet.
 *
 * Returns null if spreadsheet does not contain more than one row.
 */
function getSpreadsheetData() {
  var data = SpreadsheetApp.getActive().getSheets()[0].getDataRange().getValues();
  return (data.length > 1) ? data : null;
}

BubbleEx.html

这是从"Sheets add-on"模板改编而来的,并且是指Stylesheet.html包含在那里的文件.

<!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>

<!-- Below is the HTML code that defines the dialog element structure. -->
<div>
  <div id="series_chart_div" style="width: 400px; height: 300px;"></div>
  <div class="block" id="dialog-button-bar">
     <button id="dialog-cancel-button" onclick="google.script.host.close()">Cancel</button>
  </div>
</div>

<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('BubbleExJavaScript').getContent(); ?>

BubbleExJavaScript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"  src="https://www.google.com/jsapi"></script>

<script>
  // Load the Visualization API and desired package(s).
  google.load('visualization', '1.0', {'packages':['corechart']});

  /**
   * Run initializations on dialog load.
   */
  $(function() {
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(sendQuery);

    // Assign handler functions to dialog elements here, if needed.

    // Call the server here to retrieve any information needed to build
    // the dialog, if necessary.
  });

  /**
   * Issue asynchronous request for spreadsheet data.
   */
  function sendQuery() {
    google.script.run
      .withSuccessHandler(drawSeriesChart)
      .getSpreadsheetData();
  }

  /**
   * Callback function to generate visualization using data in response parameter.
   */
  function drawSeriesChart(response) {

    if (response == null) {
      alert('Error: Invalid source data.')
      return;
    }
    else {
      var data = google.visualization.arrayToDataTable(response,false);

      var options = {
        title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
        hAxis: {title: data.getColumnLabel(1)},  // 'Life Expectancy'
        vAxis: {title: data.getColumnLabel(2)},  // 'Fertility Rate'
        bubble: {textStyle: {fontSize: 11}}
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
  }  

</script>