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

Question

我已经根据Google的可视化API创建了一个表格图表，并发布了网络应用程序这里。数据源是带有Google响应的谷歌电子表格。有几个列包含逗号分隔的值列表，这些值是表单的Checklist项的响应。我对这些列应用了一个"CategoryFilter“。然而，它没有将每个逗号分隔的值个性化，而是将其视为一个值。

CSV值的图像不可分离

我想让过滤器根据逗号分隔值，然后将它们堆叠在下拉列表中。有办法这样做吗？

我尝试根据API为“等级级别”筛选器的值创建值，但当我在筛选器中选择其中一个值时，它不会找到结果(我假设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()查找行索引

其中包含筛选器的选定选项。

使用行索引在图表上设置视图

请参阅下面的工作片段，使用表格图表.

​

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();
  });
});

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

​

编辑

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

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);