javascript - 应用于 .ChartWrapper() 元素时出现 Google Visualization .getSelection() 错误

Question

这次我在 .ChartWrapper() 表上使用事件处理程序时出现以下错误，该表是 .Dashboard() 的一部分

Uncaught TypeError: table_db.getSelection is not a function

想法是单击表格行并返回一个值。

当我创建一个不属于 .Dashboard() 的类似示例时，代码工作正常并返回预期结果。 (包含在下面的代码片段中)

我不知道错误是因为 .Dashboard()、.ChartWrapper() 还是我做的或误用的其他事情。

知道如何处理这个吗？

一如既往，我们非常感谢您的帮助!

更新:我刚刚找到解决方案 here .

将 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>

Answer 1

getSelection 是一个图表方法

使用ChartWrapper时，必须先获取一个实例来绘制图表，

ChartWrapper.getChart()

然后使用getSelection

ChartWrapper.getChart().getSelection()