Question

我想创建一个CategoryFilter，它会在数组中搜索一个值，而不是只匹配该列。

例如，如果我有以下DataTable包含有关T恤的数据：

var data = new google.visualization.DataTable();
data.addColumn("string", "ItemName");
data.addColumn("number", "Price");
data.addColumn("string", "Size");
data.addRows([
  // Loop through and add some records
]);

我可以轻松创建一个CategoryFilter来过滤尺寸

var sizePicker = new google.visualization.ControlWrapper({
  "controlType": "CategoryFilter",
  "containerId": "size-picker",
  "options": {
    "filterColumnLabel": "Size"
  }
});

到目前为止，这一切都很有效。

现在让我们说我希望每件T恤记录都包含衬衫所带来的一系列可用颜色。

所以基本上我想要一个像这样的记录

[ "Crew T-Shirt", "10", "Large", [ "Blue", "Striped", "White" ]]

然后，一个CategoryFilter有一个颜色列表，当一个颜色被选中时，过滤器搜索数组，如果它包含所选颜色，它就包含在结果集中。

既然DataTable's addColumn()方法不支持数组，我不知道如何解决这个问题。我甚至找不到覆盖过滤方法的方法。这样的事情会有可能吗？

Answer 1

大多数人列出了DataTable中的所有组合，使用了几个CategoryFilter并将它们全部绑定在Dashboard中。例如：

var data = google.visualization.arrayToDataTable([['Item Name', 'Price', 'Size', 'Color'],
  ['Crew T-Shirt', '10', 'Large', 'Blue'],
  ['Crew T-Shirt', '10', 'Large', 'Striped'],
  // etc...
]);

var sizePicker = new google.visualization.ControlWrapper({
  "controlType": "CategoryFilter",
  "containerId": "size-picker",
  "options": { "filterColumnLabel": "Size" } });
var colorPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'color-picker',  // or whatever....
  'options': { 'filteredColumnLabel': 'Color'} });
var dashboard = new google.visualization.Dashboard( DOC.EL_BY_ID('XXX') );
dashboard.bind([sizePicker, colorPicker], [ CHART1, CHART2, etc. ]);
dashboard.draw(dataTable);

使用CategoryFilter搜索数组而不是匹配列

1 个答案: