在 Google 可视化 CategoryFilter 中获取 Parent 控件的值

Question

我有一个示例fiddle here，其中创建了 Google 可视化类别过滤器控件，

  var countryPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnIndex': 0,
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

        var regionPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control2',
          'options': {
            'filterColumnIndex': 1,
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

        var cityPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control3',
          'options': {
            'filterColumnIndex': 2,
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

在这里我们可以任意组合选择过滤器。但是，如果我直接在CityPicker 控件中选择Albany，那么我怎样才能获得其父级的值（即来自countryPicker 的值USA 和值纽约来自regionPicker) 那个特定城市属于哪个？

Answer 1

您可以使用statechange 事件处理程序来获取当前城市，然后按城市过滤DataTable 以获取与该城市对应的地区和国家组合。这是一个例子：

google.visualization.events.addListener(cityPicker, 'statechange', function () {
    var state = cityPicker.getState();
    if (state.selectedValues.length) {
        // there is a selected city
        // since you set allowMultiple to false, there can be only one, so it is safe to do this:
        var city = state.selectedValues[0];
        var rows = data.getFilteredRows([{column: 2, value: city}]);
        // parse the rows for all country/region/state combos
        var regionsCountries = [];
        var comboChecker = {};
        for (var i = 0; i < rows.length; i++) {
            var country = data.getValue(rows[i], 0);
            var region = data.getValue(rows[i], 1);
            // the comboChecker makes sure we don't add a region/country combo more than once to the data set
            if (!comboChecker[region + country]) {
                comboChecker[region + country] = true;
                regionsCountries.push({region: region, country: country});
            }
        }
        // do something with regionsCountries
    }
});

在此处查看工作示例：http://jsfiddle.net/asgallant/KLhD3/1/