1

我正在尝试将 google ChartWrapper Table 选择与 google Chartwrapper BarChart 选择连接起来。侦听器正在工作，但停在：

orgchart.setSelection(table.getSelection());

（评论这一行运行下一个）。我将非常感谢任何线索！可以在此处的 HTML 部分进行测试。我的代码是： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
  Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['orgchart', 'table']});
        google.load('visualization', '1', {packages: ['table']});
  google.load('visualization', '1.1', {packages: ['controls']});
  google.load('visualization', '1', {packages: ['barchart']});
  google.load('visualization', '1');
</script>
<script type="text/javascript">
var map;
var table;
var data;

function drawOrgChartAndTable() {
  var test = [
    ['Name',  'Manager'],
    ['Mike',  1],
    ['Jim',   3],
    ['Alice', 4],
    ['Bob',   1],
    ['Carol', 5]
  ];
  var data = google.visualization.arrayToDataTable(test);

  var orgchart = new google.visualization.ChartWrapper({
      chartType: 'BarChart',
    dataTable: test,
      options: {'title': 'Countries'},
      containerId: 'orgchart'
    });
  orgchart.draw();

  var table = new google.visualization.ChartWrapper({
      chartType: 'Table',
    dataTable: test,
      options: {'title': 'Countries'},
      containerId: 'table'
    });
  table.draw();

  // When the table is selected, update the orgchart.
  google.visualization.events.addListener(table, 'select', function() {
    orgchart.setSelection(table.getSelection());
    alert("Table event!");
  });

  // When the orgchart is selected, update the table visualization.
  google.visualization.events.addListener(orgchart, 'select', function() {
    table.setSelection(orgchart.getSelection());
    alert("Chart event!");
  });
}


google.setOnLoadCallback(drawOrgChartAndTable);
</script>
</head>


<body style="font-family: Arial;border: 0 none;">
    <table>
      <tr>
        <td>
          <div id="orgchart" style="width: 300px; height: 300px;"></div>
        </td>
        <td>
          <div id="table" style="width: 300px; height: 300px;"></div>
        </td>
      </tr>
    </table>
  </body>
</html>
​
4

1 回答 1

0

（Uli 指向解决方案的指针是正确的。在这里总结一下，因此可以将这个有价值的问题标记为已回答。）

由于chartwrapper 图表中的“选择”事件不会冒泡到chartwrapper 本身，因此您需要用table.getChart() 和orgchart.getChart() 替换对表和orgchart 的引用。

而且由于您必须等待两个图表包装器都“准备好”，然后才能将事件侦听器添加到它们各自的其他图表中，因此您必须做一些诡计。将两个图表包装在仪表板中并在仪表板上使用一个“就绪”事件处理程序可能更简单。

于 2013-06-17T15:16:58.483 回答