Визуализация кода Google - setSelection в ChartWrapper

Я пытаюсь связать выбор 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>
​
Источник

1 ответ

(Указатель Ули на решение верен. Подводя итоги, можно ответить на этот достойный вопрос.)

Так как события "select" на диаграмме chartwrapper не всплывают непосредственно перед самим chartwrapper, вам необходимо заменить ссылки на таблицу и оргструктуру на table.getChart() и orgchart.getChart().

А поскольку вам нужно подождать, пока оба обработчика диаграмм будут "готовы", прежде чем вы сможете добавить прослушиватели событий в их соответствующие другие диаграммы, вы должны сделать некоторую хитрость. Может быть проще обернуть обе диаграммы в приборную панель и использовать один "готовый" обработчик событий на приборной панели.

Источник
Другие вопросы по тегам