谷歌圖表工具 - 散點圖和表組合交互，爲什麼單向？

這是我關於堆棧溢出的第一個問題。我做了一個基於他們的例子的谷歌圖表工具散點圖/表組合。當我點擊表格中的一行時，就會選擇散點圖中的相應點（這很好）。但它並沒有反過來。我無法在分散體中選擇一個點，並讓它選擇表中的相應行。有誰知道爲什麼這不能按預期工作？我的代碼如下規定：谷歌圖表工具 - 散點圖和表組合交互，爲什麼單向？

<html> 
     <head> 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart", "table"]}); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Age', 'Weight'], 
      [ 8,  12], 
     [ 4,  5.5], 
     [ 11,  14], 
     [ 4,  5], 
     [ 3,  3.5], 
     [ 6.5, 7], 
     [ 6.5, 7] 
    ]); 

    var options = { 
     title: 'Age vs. Weight comparison', 
     hAxis: {title: 'Age', minValue: 0, maxValue: 15}, 
     vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, 
     legend: 'none' 
    }; 

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
    var table = new google.visualization.Table(document.getElementById('table_div')); 
    chart.draw(data, options); 
    table.draw(data); 

    google.visualization.events.addListener(chart, 'select', function() { 
    table.setSelection(chart.getSelection());}); 

    google.visualization.events.addListener(table, 'select', function() { 
    chart.setSelection(table.getSelection());}); 

    } 
    google.setOnLoadCallback(drawChart); 

    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 500px; height: 500px;"></div> 
    <div id="table_div" style="width: 500px; height: 500px;"></div> 
    </body> 
</html>

來源

2012-05-19 user1404690

因爲getSelection()回報都列和行的散點圖，只是排了表，有一點衝突。事實證明，如果你只是通過從散點圖行信息，您可以選擇的確錶行，你只需要：

table.setSelection([{row: chart.getSelection()[0].row}]);

這需要你點擊的第一個項目，並傳遞一個對象只有行數據。

來自here的靈感和工作示例here。

來源

2012-05-21 09:47:11 cchana

谷歌圖表工具 - 散點圖和表組合交互，爲什麼單向？

回答

相關問題