Google可视化动态引用定义的选择器

Question

[我的目标是建立一个事件侦听器，该侦听器将循环遍历可视化对象的定义的选择器，以针对每个调用器分别调用setState()和draw()。

我最初的想法是这样的：

for (var i = 0; i < 2; i++) { // 2 is hard coded for simplicity
    categoryPicker[i].setState({selectedValues: []});
    categoryPicker[i].draw();
}

我曾尝试通过它的方法getState()访问选择器作为测试，但除非我进行硬编码，否则似乎无法获得结果：

//This works when hard coded    
console.log(categoryPicker1.getState());

//ERROR temp.picker.getState is not a function
temp = { picker: "categoryPicker" + i };
//console.log(temp.picker.getState());

//ERROR temp.picker.getState is not a function 
temp2 = ["categoryPicker" + i];
//console.log(temp2[i].getState());

我需要一些指导来弄清楚如何动态调用选择器？出于安全原因，我不想求助于使用eval()。

感谢您的协助。

完整的示例：

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawChart();
}

function drawChart() {

  var result = [{
    "calendarWeek": "2017-W30",
    "partId": '1234567890xxx',
    "someNumber": 0
  }, {
    "calendarWeek": "2017-W30",
    "partId": '1234567890yyy',
    "someNumber": 0
  }, {
    "calendarWeek": "2017-W30",
    "partId": '1234567890111',
    "someNumber": 0
  }];

  //Create DataTable
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Calendar Week');
  data.addColumn('string', 'Part Id');
  data.addColumn('number', 'Some Number');

  var dataArray = [];
  $.each(result, function(i, obj) {
    dataArray.push([
      obj.calendarWeek,
      obj.partId,
      obj.someNumber
    ]);
  });
  data.addRows(dataArray);

  //Options

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker0 = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'div_categoryPicker1',
    options: {
      filterColumnIndex: 0,
      matchType: 'any',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: true
      }
    }
  });
  var categoryPicker1 = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'div_categoryPicker2',
    options: {
      filterColumnIndex: 1,
      matchType: 'any',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      width: '100%',
      height: 'auto',
      page: 'enable',
      pageSize: '15',
      sort: 'enable',
      allowHtml: true
    }
  });

  google.visualization.events.addOneTimeListener(dashboard, 'ready', function() {
    // reset the category picker when clicked.
    var reset = document.getElementById('categoryPicker_resetBtn');
    reset.addEventListener('click', function() {
      categoryPicker0.setState({
        selectedValues: []
      });
      categoryPicker0.draw();
      categoryPicker1.setState({
        selectedValues: []
      });
      categoryPicker1.draw();
    });
  });

  dashboard.bind([categoryPicker0, categoryPicker1], [table]);
  dashboard.draw(data);

} //END  function drawChart()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="div_dashboard"></div>
<div id="div_categoryPicker1"></div>
<div id="div_categoryPicker2"></div><br>
<button id="categoryPicker_resetBtn">Reset</button><div id="div_table"></div>

Answer 1

您可以将它们存储在数组中...

var pickers = [];
pickers.push(new google.visualization.ControlWrapper({
  controlType: 'StringFilter',
  containerId: 'div_categoryPicker1',
  options: {
    filterColumnIndex: 0,
    matchType: 'any',
    ui: {
      labelStacking: 'vertical',
      allowTyping: false,
      allowMultiple: false,
      allowNone: true
    }
  }
}));
pickers.push(new google.visualization.ControlWrapper({
  controlType: 'StringFilter',
  containerId: 'div_categoryPicker2',
  options: {
    filterColumnIndex: 1,
    matchType: 'any',
    ui: {
      labelStacking: 'vertical',
      allowTyping: false,
      allowMultiple: false,
      allowNone: true
    }
  }
}));

然后遍历数组...

pickers.forEach(function (picker) {
  console.log(picker.getState());
});