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

问题描述

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

未捕获的类型错误：table_db.getSelection 不是函数

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

当我创建一个不属于 a 的类似示例时，.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>

标签： javascriptchartsgoogle-visualization

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

问题描述

解决方案

推荐阅读