Google Visualization Ссылка на определенные средства выбора динамически - PullRequest
Новая
       6

Google Visualization Ссылка на определенные средства выбора динамически

1 голос
/ 20 января 2020

Моя цель - создать прослушиватель событий, который проходит через определенные средства выбора визуализации, чтобы вызывать 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();
}

1 Ответ

1 голос
/ 21 января 2020

вы можете хранить их в массиве ... 

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

, затем l oop через массив ... 

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