Google apps script 类别过滤器重叠内容

我在表格上设置了一个类别过滤器。类别列表源自图纸中的列表。多个类别有很长的名称。选择类别过滤器上的下拉列表后，它将在面板边框之外呈现选择，并与面板边框后面的内容重叠。我可以在应用程序脚本中做些什么来清理这个问题吗

这是csv格式的“Sheet1”中的数据（便于导入）：

代码：

  function doGet() {
    var templateDocId = "1UH....";
    var ss0 = SpreadsheetApp.openById(templateDocId).getSheetByName('Sheet1');
    var data0 = ss0.getDataRange();

    var quarterfilter = Charts.newCategoryFilter().setFilterColumnIndex(2).build();

    var tableChart = Charts.newTableChart()
    .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([0,1,2])).setDimensions(700,300).build()

    var dashboard0 = Charts.newDashboardPanel().setDataTable(data0).bind([quarterfilter],[tableChart]).build();

    var app0 = UiApp.createApplication()
    var filterpanel = app0.createVerticalPanel().add(app0.createHorizontalPanel().add(app0.createLabel("List").setStyleAttribute("fontSize","20")))
    var chartpanel = app0.createHorizontalPanel().add(app0.createVerticalPanel().add(tableChart))

    filterpanel.add(quarterfilter);
    chartpanel.setSpacing(20);
    dashboard0.add(app0.createVerticalPanel().add(filterpanel).add(chartpanel));
    app0.add(dashboard0);
    return app0;

  }

---

在过去的一周里，我花了好几个小时在这上面，我找不到任何方法来调整选择框的大小，或者强制选择框中的项目符合小部件的宽度

您可以使用

.setLabelStacking（orientation）

控制选定类别的布局，但没有类似的方法来控制这些类别在选择器中的显示方式

目前还没有这方面的报告。你应该报告这个问题。如果你在这里添加一个问题的链接，那么其他分享痛苦的人将被鼓励去投票支持它

变通办法 选择器会自动调整其宽度，限制为可容纳约30个字符。因此，一个不太理想的选择是截断电子表格中的类别名称。这将为您提供对显示内容的最佳控制

另一种保持电子表格不变的方法是从电子表格中提取数据，并在自己构建

dataTable

时截断更宽的列。这会给你这样的东西：

代码 由于

dataTable

一旦构建（或从某个范围生成）就无法修改，因此我们需要自己制作。为了简化这一点，该函数做出了与范围相同的假设。它接受一个二维值数组，并返回一个可用于图表的

dataTable

。（）

---

你能发布重现问题的最小代码吗？我发布了代码。谢谢。对这个问题有什么想法吗？

  function doGet() {
    var templateDocId = "1UH....";
    var ss0 = SpreadsheetApp.openById(templateDocId).getSheetByName('Sheet1');
    var data0 = ss0.getDataRange();

    var quarterfilter = Charts.newCategoryFilter().setFilterColumnIndex(2).build();

    var tableChart = Charts.newTableChart()
    .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([0,1,2])).setDimensions(700,300).build()

    var dashboard0 = Charts.newDashboardPanel().setDataTable(data0).bind([quarterfilter],[tableChart]).build();

    var app0 = UiApp.createApplication()
    var filterpanel = app0.createVerticalPanel().add(app0.createHorizontalPanel().add(app0.createLabel("List").setStyleAttribute("fontSize","20")))
    var chartpanel = app0.createHorizontalPanel().add(app0.createVerticalPanel().add(tableChart))

    filterpanel.add(quarterfilter);
    chartpanel.setSpacing(20);
    dashboard0.add(app0.createVerticalPanel().add(filterpanel).add(chartpanel));
    app0.add(dashboard0);
    return app0;

  }

/**
 * Produce a dataTable object suitable for use with Charts, from
 * an array of rows (such as you'd get from Range.getValues()).
 * Assumes labels are in row 0, and the data types in row 1 are
 * representative for the table.
 *
 * @param {Array} data  Array of table rows
 *
 @ @returns {DataTable} Refer to GAS documentation
 */
function dataTableFromArray( data ) {
 var dataTable = Charts.newDataTable();
  for (var col=0; col<data[0].length; col++) {
    var label = data[0][col];
    var firstCell = data[1][col];
    if (typeof firstCell == 'string')
      dataTable.addColumn(Charts.ColumnType.STRING, label);
    else
      dataTable.addColumn(Charts.ColumnType.NUMBER, label);
  }
  for (var row = 1; row < data.length; row++) {
    dataTable.addRow(data[row]);
  }  
  return dataTable.build();
}

/**
 * Ensure the text in the indicated columns does not exceed the
 * given maximum length. The data table is changed in place, but
 * is also returned for chaining.
 *
 * @param {Array}    data    Array of Rows
 * @param {Number}   maxLen  Maximum string length to enforce
 * @param {Array}    columns (optional) Array of column numbers
 *                           for enforcement
 *
 * @returns {Array}  Resulting array for chaining.
 */
function truncateLongText( data, maxLen, columns ) {
  if (maxLen < 10) throw new Error( 'maxLen too small' );  // Truncating becomes pointless
  var elipses = '...';
  var frontLen = Math.ceil(2*maxLen / 3);
  var backlen = (maxLen-frontLen-elipses.length);
  for (var row=0; row < data.length; row++) {
    for (var col=0; col<data[row].length; col++) {
      if (columns != undefined && columns.indexOf(col) != -1) {
        var cell = data[row][col];
        if (typeof cell == 'string' && cell.length > maxLen) {
          var front = cell.slice(0,frontLen);
          var back = backlen > 0 ? cell.slice(-backlen) : '';
          cell = front + elipses + back;  // Truncate cell contents
          data[row][col] = cell;
        }
      }
    }
  }
  return data;
}

function doGet() {
    var templateDocId = "1UH....";
    var ss0 = SpreadsheetApp.openById(templateDocId).getSheetByName('Sheet1');
    var data0 = truncateLongText(ss0.getDataRange().getValues(),30,[2]);

    var quarterfilter = Charts.newCategoryFilter().setFilterColumnIndex(2).build();

    var tableChart = Charts.newTableChart()
    .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([0,1,2])).setDimensions(700,300).build()

    var dashboard0 = Charts.newDashboardPanel().setDataTable(dataTableFromArray(data0)).bind([quarterfilter],[tableChart]).build();

    var app0 = UiApp.createApplication()
    var filterpanel = app0.createVerticalPanel().add(app0.createHorizontalPanel().add(app0.createLabel("List").setStyleAttribute("fontSize","20")))
    var chartpanel = app0.createHorizontalPanel().add(app0.createVerticalPanel().add(tableChart))

    filterpanel.add(quarterfilter);
    chartpanel.setSpacing(20);
    dashboard0.add(app0.createVerticalPanel().add(filterpanel).add(chartpanel));
    app0.add(dashboard0);
    return app0;

  }