外部元素

Question

我有一个谷歌可视化表格表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 Chart进行通信：

＆＃13;

＆＃13;

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: '$8,000' }],
      ['Alice', { v: 12500, f: '$12,500' }],
      ['Bob', { v: 7000, f: '$7,000' }],
      ['Jim', { v: 8000, f: '$8,000' }],
      ['Alice', { v: 12500, f: '$12,500' }],
      ['Bob', { v: 7000, f: '$7,000' }],
      ['Jim', { v: 8000, f: '$8,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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;