动态定义的Google类别选择器

Question

我可以使用for循环定义每个类别选择器。但是，每个选择器变量最终都经过硬编码才能使Google API正常工作：

  var categoryPickerArray = [];
  for (var i = 0; i < categoryPickers.length; i++) {
    categoryPickerArray.push(
      new google.visualization.ControlWrapper(categoryPicker_default(categoryPickers[i])),
    );
  //eval(`var categoryPicker${i} = categoryPickerArray[i];`);//works but uses eval
  }
  var categoryPicker0 = categoryPickerArray[0];
  var categoryPicker1 = categoryPickerArray[1];

我可以使用eval()，但出于所有安全考虑不希望使用。

我的目标是根据我推送到categoryPickerArray的内容动态定义选择器变量。我试图避免需要对每个var categoryPicker0 = categoryPickerArray[0]＃1，＃2等进行硬编码。

希望某人对如何实现这一目标有所了解。一如既往的感谢！

这是我的工作代码：

// 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('dashboard'));

  const categoryPicker_default = (categoryPicker) => {

    var id = categoryPicker.id;
    var controlType = categoryPicker.controlType;
    var filterColumnIndex = categoryPicker.filterColumnIndex;

    const picker_options = `
            {
                "controlType": "${controlType}",
                "containerId": "categoryPicker${id}",
                "options": {
                    "filterColumnIndex": ${filterColumnIndex},
                    "matchType": "any",
                    "ui":{
                        "labelStacking": "vertical",
                        "allowTyping": false,
                        "allowMultiple": false,
                        "allowNone": true
                    }
                }
            }
    `;
    return JSON.parse(picker_options);
  };

  const categoryPickers = [{
      "id": 0,
      "controlType": "StringFilter",
      "filterColumnIndex": 0
    },
    {
      "id": 1,
      "controlType": "StringFilter",
      "filterColumnIndex": 1
    }
  ];

  var categoryPickerArray = [];
  for (var i = 0; i < categoryPickers.length; i++) {
    categoryPickerArray.push(
      new google.visualization.ControlWrapper(categoryPicker_default(categoryPickers[i])),
    );
    //eval(`var categoryPicker${i} = categoryPickerArray[i];`);//works but uses eval
  }

  var categoryPicker0 = categoryPickerArray[0];
  var categoryPicker1 = categoryPickerArray[1];

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


  // Picker reset
  google.visualization.events.addOneTimeListener(dashboard, 'ready', function() {
    var reset = document.getElementById('categoryPicker_resetBtn');
    reset.addEventListener('click', function() {
      for (var i = 0; i < categoryPickerArray.length; ++i) {
        categoryPickerArray[i].setState({
          selectedValues: []
        });
        categoryPickerArray[i].draw();
      }
    });
  });

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

} //END  function drawChart()

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

<div id="dashboard"></div>
<div id="categoryPicker0"></div>
<div id="categoryPicker1"></div><br>
<button id="categoryPicker_resetBtn">Reset</button>
<div id="table"></div>

Answer 1

如果您正在为bind方法进行硬编码，您可以直接将选择器数组直接传递...

dashboard.bind(categoryPickerArray, [table]);