Question

我正在尝试将Google ChartWrapper表格选择与Google Chartwrapper BarChart选择相关联。听众正在工作，但停在：

orgchart.setSelection(table.getSelection());

（评论此行将在下一行开始）。我会非常感谢任何线索！它可以在HTML section here中进行测试。我的代码是：

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

Answer 1

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

因为＆＃39;选择＆＃39; chartwrapper图表中的事件不会冒泡到chartwrapper本身，你需要用table.getChart（）和orgchart.getChart（）替换对table和orgchart的引用。

因为你必须等待两个包装工作者准备好＆＃39;在将事件监听器添加到各自的其他图表之前，您必须做一些诡计。将两个图表包装在仪表板中并使用一个“准备好”的图表可能更简单。仪表板上的事件处理程序。

Google Code Visualization - ChartWrapper中的setSelection

1 个答案: