Question

我已根据Google's Visualization API创建了一个表格图表并发布了网络应用here。数据来源为a Google Spreadsheet，其中包含Google表单回复。一对列包含逗号分隔值列表，这些值是表单的核对表项的响应。我已经应用了一个＆＃34; CategoryFilter＆＃34;到这些专栏。但是，不是将每个逗号分隔值个性化，而是将其视为一个值。

Image of CSV Values not Separated

我希望过滤器根据逗号分隔值，然后将它们堆叠在下拉列表中。有没有办法做到这一点？

我已经尝试根据API为＆＃34;成绩水平＆＃34;的值创建值。过滤器，但是当我选择过滤器中的一个值时，它没有找到结果（我假设因为CategoryFilter不进行部分匹配）。

 var gradeLevels = ['K-2','3-5'];

   var GradeLevelCategoryFilter = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'GradeLevelCategoryFilter',
      'options': {
       'filterColumnIndex': '11',
       'matchType': 'any',
       'allowTyping': true,
       'values' : gradeLevels,
       'ui': {
       'labelStacking': 'horizontal',
       'label': '',
       'caption' : 'Filter by Grade Level(s)',
       'selectedValuesLayout': 'aside',
       'sortValues' : false,
       }
      }
    });

Answer 1

当电子表格加载时，
在列上使用数据表方法getDistinctValues(index) 这将返回列值的明确列表
然后在逗号上拆分每个值并构建一个唯一的选项列表
使用过滤器上values选项的选项

然后在过滤器的'statechange'事件中，使用数据表方法getFilteredRows()来查找行索引
其中包含过滤器选择的选项
使用行索引在图表上设置视图

请参阅以下工作代码段，使用表格图表...

＆＃13;

google.charts.load('current', {
  packages:['controls', 'corechart', 'table']
}).then(function () {
  var sheet = 'https://docs.google.com/spreadsheets/d/1DOTezFuzpH8wzeh25Cgv9e9q577zd_HN1TiIxVQzbUQ/edit#gid=0';

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'chart-table',
    options: {
      allowHtml: true
    }
  });

  var filter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter-grade',
    options: {
      filterColumnIndex: 12,
      matchType: 'any',
      allowTyping: true,
      ui: {
        labelStacking: 'horizontal',
        label: '',
        caption: 'Filter by Grade Level(s)',
        selectedValuesLayout: 'aside',
        sortValues: false
      }
    }
  });

  new google.visualization.Query(sheet).send(function (response) {
    var data = response.getDataTable();
    var gradeAnswers = data.getDistinctValues(12);
    var gradeChoices = [];
    gradeAnswers.forEach(function (answer) {
      if (answer !== null) {
        var choices = answer.split(',');
        choices.forEach(function (choice) {
          choice = choice.trim();
          if (gradeChoices.indexOf(choice) === -1) {
            gradeChoices.push(choice);
          }
        });
      }
    });
    gradeChoices.sort();

    google.visualization.events.addListener(filter, 'statechange', function () {
      var state = filter.getState().selectedValues;
      table.setView(null);
      if (state.length > 0) {
        table.setView({
          rows: data.getFilteredRows([{
            column: 12,
            test: function (value) {
              var found = false;
              if (value !== null) {
                state.forEach(function (selected) {
                  if (value.indexOf(selected) > -1) {
                    found = true;
                  }
                });
              }
              return found;
            }
          }])
        });
      }
      table.draw();
    });

    filter.setDataTable(data);
    filter.setOption('values', gradeChoices);
    filter.draw();
    table.setDataTable(data);
    table.draw();
  });
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter-grade"></div>
<div id="chart-table"></div>

＆＃13;

编辑

您可以在初始定义上设置视图...

var table = new google.visualization.ChartWrapper({
  chartType: 'Table',
  containerId: 'chart-table',
  options: {
    allowHtml: true
  },
  view: {
    columns: [0]
  }
});

或使用setView方法......

table.setView({
  columns: [0]
});

编辑2

  var view = {
    columns: [0]
  };
  if (state.length > 0) {
    view.rows = data.getFilteredRows([{
      column: 12,
      test: function (value) {
        var found = false;
        if (value !== null) {
          state.forEach(function (selected) {
            if (value.indexOf(selected) > -1) {
              found = true;
            }
          });
        }
        return found;
      }
    }]);
  }
  table.setView(view);

编辑3

您可以将多个滤镜组合成一个数组，
在传递给getFilteredRows

之前

var view = {
  columns: [0]
};
var viewFilters = [];
if (stateGrade.length > 0) {
  viewFilters.push({
    column: 12,
    test: function (value) {
      var found = false;
      if (value !== null) {
        stateGrade.forEach(function (selected) {
          if (value.indexOf(selected) > -1) {
            found = true;
          }
        });
      }
      return found;
    }
  });
}
if (stateSubject.length > 0) {
  viewFilters.push({
    column: subjectIndex,
    test: function (value) {
      var found = false;
      if (value !== null) {
        stateSubject.forEach(function (selected) {
          if (value.indexOf(selected) > -1) {
            found = true;
          }
        });
      }
      return found;
    }
  });
}
view.rows = data.getFilteredRows(viewFilters);
table.setView(view);

将Google Visualization CategoryFilter应用于包含逗号分隔值列表的电子表格列

1 个答案: