Выбор категории Google определяется динамически - PullRequest
Новая
       4

Выбор категории Google определяется динамически

1 голос
/ 04 февраля 2020

Я могу определить каждый сборщик категорий, используя for l oop. Однако каждая переменная выбора оказывается жестко запрограммированной для работы API Google: 

  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 и т. Д. c.

Надеюсь, у кого-то есть представление о том, как это можно сделать. Спасибо как всегда!

Вот мой рабочий код: 

// 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
  }
 
  // Commented out per suggestion from WhiteHat - See bind below
  //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]); //Old call using hard coded values
  dashboard.bind(categoryPickerArray, [table]);//New call using array
  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>

ОБНОВЛЕНИЕ:
Внесены изменения во фрагменте в соответствии с предложением Mr. WhiteHat, чтобы использовать categoryPickerArray вместо жестко закодированных значений в привязке панели управления. 

dashboard.bind(categoryPickerArray, [table]);

1 Ответ

1 голос
/ 04 февраля 2020

если вы жестко программируете метод bind,
, вы можете просто передать массив сборщиков напрямую ... 

dashboard.bind(categoryPickerArray, [table]);
...