Google ChartWrapper テーブルの選択を 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>