Question

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

如果您使用Google在开发者页面中提供的代码example，您会看到问题：

我应该更改哪些行高保持不变？

谢谢！

Answer 1

I checked that example and you are right, every row changes to fit the table. Also the example uses UI service which is deprecated. I tried using the Charts API and was able to provide different attributes to the chart and even accomplish what you mentioned.

To run the chart also from Apps script you will need the function:

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

Then you have to create a html file called "index" (or other name you want) and there you will create the html and javascript code.

      // 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>

When creating the Table, notice that I only defined the 'width' of the table and not the height. With this the height gets fixed dynamically.

过滤时的Google-apps-script行高

1 个答案: