google 来自外部元素的可视化点击事件处理程序

Question

我有一个 google 可视化 table 图表 sample here。如何从外部 html 元素触发点击事件处理程序？我试过

google.visualization.events.addListener(document.getElementById('clickMe'), 'click', function() {               
           alert();
           var view = google.visualization.data.group(data, [0], [1]); 
           table.draw(view);
 });

但是事件没有触发。

Answer 1

google.visualization.events.addListener 函数似乎不支持 非图表 元素的附加事件。

以下示例演示如何从外部元素与 Google 图表通信：

google.load("visualization", "1", { packages: ["table"] });
google.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addRows([
      ['Jim', { v: 8000, f: ',000' }],
      ['Alice', { v: 12500, f: ',500' }],
      ['Bob', { v: 7000, f: ',000' }],
      ['Jim', { v: 8000, f: ',000' }],
      ['Alice', { v: 12500, f: ',500' }],
      ['Bob', { v: 7000, f: ',000' }],
      ['Jim', { v: 8000, f: ',000' }]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, { showRowNumber: true, height: 360 });

    
    addEvent(document.getElementById('button_group'), 'click', function () { groupTable(table,data); });
}


function groupTable(table,data) {
    if(document.getElementById('button_group').value == "Group") {
        var view = google.visualization.data.group(data, [0], [{'column': 1, 'aggregation': google.visualization.data.avg, 'type': 'number'}]);
        table.draw(view);  
        document.getElementById('button_group').value = "Show original";
    }
    else {
       table.draw(data, { showRowNumber: true, height: 360 });
       document.getElementById('button_group').value = "Group";
    }
   
}


function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<input id="button_group" type="button" value="Group"> 
<div id="table_div"></div>

google 来自外部元素的可视化点击事件处理程序

google visualization click event handler from external element

javascript

events

click

google-visualization