使用CategoryFilter搜索數組而不是匹配列

Question

我想創建一個CategoryFilter，它將在數組中搜索一個值，而不僅僅是匹配該列。

例如，如果我有以下包含與T恤有關的數據的DataTable：

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