过滤时的 Google-apps-script 行高答案

【问题标题】：Google-apps-script row height when filtering过滤时的 Google-apps-script 行高
【发布时间】：2015-09-02 05:34:57
【问题描述】：

我正在使用带有 StringFilter 的 google-apps-script 数据表，以便能够根据其中一列的内容过滤行。问题是当我使用过滤器时，行高会改变以填充整个表格。我希望行高保持不变，因为它对用户不友好，特别是在您过滤时，您只会得到一两个结果。

如果你使用谷歌在开发者页面提供的代码example，你会看到问题：

我应该改变什么以使行高保持不变？

谢谢！

【问题讨论】：

标签： google-apps-script

【解决方案1】：

我检查了该示例，您是对的，每一行都会更改以适合表格。该示例还使用了已弃用的UI service。我尝试使用Charts API 并能够为图表提供不同的属性，甚至完成你提到的。

要从 Apps 脚本也运行图表，您需要以下函数：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

然后您必须创建一个名为“index”（或您想要的其他名称）的 html 文件，然后您将在其中创建 html 和 javascript 代码。

      // Load the Visualization API and the controls package.
      google.load('visualization', '1.0', {'packages':['controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a bar chart,
      // passes in the data and draws it.      
      function drawDashboard() {
         var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn('number', 'Energy Level');

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 1, .25],
        [{v: [9, 0, 0], f: '9 am'}, 2, .5],
        [{v: [10, 0, 0], f:'10 am'}, 3, 1],
        [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
        [{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
        [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
        [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
        [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
        [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
        [{v: [17, 0, 0], f: '5 pm'}, 10, 10],
      ]); 
      
        drawChart(data)
      }

      
       function drawChart(data) {

       
        // Create a dashboard.        
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var stringFilter = new google.visualization.ControlWrapper({
            controlType: 'StringFilter',
            containerId: 'filter_div',
            options: {
            filterColumnLabel: 'Motivation Level'
               }
        });

        
        
        // Define a table
        var table = new google.visualization.ChartWrapper({
          chartType: 'Table',
          dataTable: data,
          containerId: 'table_div',
          options: {
          width: '400px'
               }
         });
       
        // Establish dependencies, declaring that 'filter' drives 'ColumnChart',
        // so that the column chart will only display entries that are let through
        // given the chosen slider range.
        
        dashboard.bind([stringFilter], [table]);

        // Draw the dashboard.
        dashboard.draw(data);
      }

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
  </head>
  <body>
  
    <!--Div that will hold the dashboard-->
     <div id="dashboard_div">
    
     <h2>Chart Data</h2>
     
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <br />
      <table>
        <tr>
          <td>
            <div id="chart_div"></div>
          </td>
          <td>
            <div id="table_div"></div>
          </td>
        </tr>
      </table>

    </div>

  </body>
</html>

在创建表格时，请注意我只定义了表格的“宽度”而不是高度。这样，高度就会动态固定。

【讨论】：