Ошибка визуализации Google .getSelection () при применении к элементу .ChartWrapper () - PullRequest
Новая
       6

Ошибка визуализации Google .getSelection () при применении к элементу .ChartWrapper ()

0 голосов
/ 08 мая 2018

В этот раз у меня возникает следующая ошибка при использовании обработчика событий для таблицы .ChartWrapper(), которая является частью .Dashboard()

Uncaught TypeError: table_db.getSelection не является функцией

Идея состоит в том, чтобы щелкнуть строку таблицы и вернуть значение.

Когда я создаю подобный пример, который не является частью .Dashboard(), код работает просто отлично и возвращает ожидаемый результат. (включено во фрагмент ниже)

Я не знаю, произошла ли ошибка из-за .Dashboard(), .ChartWrapper() или из-за того, что я сделал или неправильно применил.

Есть идеи о том, что делать с этим?

Как всегда, помощь очень ценится!

ОБНОВЛЕНИЕ : Я только что нашел решение здесь .

Изменено table_db.getSelection()[0]; на table_db.getChart().getSelection()[0];

Изменен фрагмент ниже. Спасибо всем, кто нашел время, чтобы посмотреть. 

google.charts.load('current', {
  packages: ['table', 'controls']
}).then(function() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('string', 'Product');
  data.addColumn('number', 'Quantity');

  var dt1 = new Date(moment().endOf('month').subtract(3, 'month'));
  var dt2 = new Date(moment().endOf('month').subtract(2, 'month'));
  var dt3 = new Date(moment().endOf('month').subtract(1, 'month'));
  var dt4 = new Date(moment().startOf('month'));
  var dt5 = new Date(moment().startOf('month').add(1, 'day'));
  var dt6 = new Date(moment().startOf('month').add(2, 'day'));

  data.addRows([
    [dt1, 'a', 100],
    [dt2, 'b', 200],
    [dt3, 'a', 300],
    [dt4, 'b', 400],
    [dt5, 'a', 500],
    [dt6, 'b', 600],
  ]);

  var view = new google.visualization.DataView(data);

  example_dashboard(view);
  example_nonDashboard(view);

});

function example_dashboard(view) {

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

  var categoryPicker1 = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'div_categoryPicker1',
    options: {
      filterColumnIndex: view.getColumnIndex('Product'),
      matchType: 'any',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        allowNone: true
      }
    }
  });

  var table_db = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      width: '100%',
      height: 'auto',
    }
  });

  dashboard.bind(categoryPicker1, table_db);
  dashboard.draw(view);

  google.visualization.events.addListener(table_db, 'select', selectHandler_table_db);

  function selectHandler_table_db() {
    console.log('selectHandler_table');

    //var selectedItem = table_db.getSelection()[0];
    var selectedItem = table_db.getChart().getSelection()[0];
    console.log('selectedItem');
    console.log(selectedItem);

    var product = view.getValue(selectedItem.row, 1);
    console.log('product');
    console.log(product);

  } //END selectHandler_table
} //END example_dashboard(){


function example_nonDashboard(view) {

  var options = {};

  var table_nonDB = new google.visualization.Table(document.getElementById('div_table_nonDB'));
  
  table_nonDB.draw(view, options);

  google.visualization.events.addListener(table_nonDB, 'select', selectHandler_table_nonDB);

  function selectHandler_table_nonDB() {
    console.log('selectHandler_table_nonDB');

    var selectedItem = table_nonDB.getSelection()[0];
    console.log('selectedItem');
    console.log(selectedItem);

    var product = view.getValue(selectedItem.row, 1);
    console.log('product');
    console.log(product);

  } //END selectHandler_table_nonDB
} //END example_nonDashboard()
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
Dashboard Example
<br/>
Getting error "Uncaught TypeError: table_db.getSelection is not a function" when clicking on table row
<div id='div_dashboard'>
  <div id='div_categoryPicker1'></div>
  <div id="div_table"></div>
</div>
<br />
<br /> Non-Dashboard Example - returns expected result
<div id="div_table_nonDB"></div>

1 Ответ

0 голосов
/ 08 мая 2018

getSelection - это метод диаграммы

при использовании ChartWrapper вы должны сначала получить экземпляр для диаграммы, 

ChartWrapper.getChart()

затем используйте getSelection 

ChartWrapper.getChart().getSelection()
...