谷歌可視化動態引用定義的選擇器

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 } } }); //ADDED THIS after suggestion from WhiteHat var pickerArr = [categoryPicker0 , categoryPicker1 ]; 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(); //ADDED THIS after suggestion from WhiteHat for (var i = 0; i < pickerArr.length; ++i) { pickerArr[i].setState({selectedValues: []}); //This resets pickers dynamically pickerArr [i].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>

更新：

按照 WhiteHat 的建議，我可以通過添加以下代碼來更新上面的代碼段。

這是在定義選擇器之后設置的：

//ADDED THIS after suggestion from WhiteHat
var pickerArr = [categoryPicker0 , categoryPicker1 ];

這替換了我在重置按鈕的事件偵聽器中的代碼：

//ADDED THIS after suggestion from WhiteHat
for (var i = 0; i < pickerArr.length; ++i) {     
  pickerArr[i].setState({selectedValues: []}); //This resets pickers dynamically
  pickerArr [i].draw();
}

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