谷歌代碼可視化 - setSelection ChartWrapper

我想連接谷歌ChartWrapper表選擇谷歌Chartwrapper BarChart選擇。聽衆正在工作，但停在：谷歌代碼可視化 - setSelection ChartWrapper

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>

來源

2013-01-04 Patrick

這與https://groups.google.com/d/topic/google-visualization-api/J3JmrdH4S8E/討論中的討論相同 – Uli

（烏利的指針的解決方案是正確的在這裏總結，所以這值得問題可以被標記回答。）

由於chartwrapper圖表中的「選擇」事件不冒泡到chartwrapper本身，您需要用table.getChart（）和orgchart.getChart（）來替換對table和orgchart的引用。

既然你必須等待兩個chartwrappers「準備就緒」，然後才能將事件監聽器添加到他們各自的其他圖表中，那麼你必須做一些技巧。在儀表板中包裝兩個圖表並在儀表板上使用一個「就緒」事件處理程序可能會更簡單。

來源

2013-06-17 15:16:58 dlaliberte

谷歌代碼可視化 - setSelection ChartWrapper

回答

相關問題