如何使用ChartWrapper在仪表板中获取选择

Question

我正试图在谷歌仪表板ChartWrapper中获得一个事件。

我需要当我选择一行时，我可以抛出一个事件并获得所选的值。

任何人都可以帮助我或者说我怎么能得到它？

这是我的代码：

<script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">


    var data;
    var table;
    var dash_container;
    var myDashboard;
    var stringFilter;
    var myTable;


    function draw() {
        // To see the data that this visualization uses, browse to
      // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
      data = new google.visualization.Query(
          'http://spreadsheets.google.com/tq?key=0Ai3BbtO5JfaodGluSWw0UVFvZ3BDak1nYzVac0RPWGc&pub=1');

      // Send the query with a callback function.
      data.send(handleQueryResponse);


    }
     //fin de draw

    function handleQueryResponse(response) {

      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      table = response.getDataTable();

       // Create a dashboard.  
      dash_container = document.getElementById('dashboard'),  
      myDashboard = new google.visualization.Dashboard(dash_container);  

      // Define a StringFilter control for the 'Name' column
      stringFilter = new google.visualization.ControlWrapper({
       'controlType': 'StringFilter',
       'containerId': 'filter',
       'options': {'filterColumnLabel': 'nombre'}
      }); 

      // Table visualization  
      myTable = new google.visualization.ChartWrapper({  
       'chartType' : 'Table',  
       'containerId' : 'table',
       'view': {'columns': [0]} ,
       'dataTable': table
      });  


    // Register a listener to be notified once the dashboard is ready.
        google.visualization.events.addListener(myDashboard, 'ready', dashboardReady);


      myDashboard.bind(stringFilter, myTable);

      myDashboard.draw(table);


    }

**这是我遇到问题的地方，因为我可以获得选择行

    function dashboardReady() {

        google.visualization.events.addListener(myTable, 'select', function(event) {

        var selection = myTable.getChart().getSelection();


        // iterate over all selected rows
        for (var i = 0; i < selection.length; i++) {
            // do something with selection[i].row
          var item = selection[i];
        }
      alert('Fila seleccionada es: '+item.row +' y la Columna: '+item.column);
    });
      }

    google.setOnLoadCallback(draw);

Answer 1

为此，在绘制图表后需要做两件事：

1. 将“ready”事件侦听器添加到图表包装器中;
2. 当图表包装器准备好时，向表中添加一个'select'事件监听器。

因此，在代码中的myDashboard.draw(table);之后添加以下两行

google.visualization.events.addListener(myTable , 'ready', function(){
     google.visualization.events.addListener(myTable ,'select', tableSelectHandler);
});


function tableSelectHandler(){
   var selection = myTable.getChart().getSelection();
   alert(data.getValue(selection[0].row,0));
}

由于我认为存在错误，因此触发就绪功能将有大约3秒的延迟，请参阅此处以获取有关此问题的错误报告的更多详细信息：https://code.google.com/p/google-visualization-api-issues/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Stars%20Modified%20Type%20Status%20Priority%20Milestone%20Owner%20Summary&groupby=&sort=&id=1470

Answer 2

使用Wrapper，您必须再添加一个函数来获取所选项，即getChart（）类似：

var selectedItem = wrapper.getChart().getSelection()

记住，没有包装器，你得到它：

var selectedItem = chart.getSelection()

Answer 3

代码工作......

google.setOnLoadCallback(draw);		       

  function draw() {
		
    var data = [
      ['Year', 'Sales', 'Expenses'],
      ['2004', 1000,    400],
      ['2005', 1170,    460],
      ['2006', 660,     1120],
      ['2007', 1030,    540]
    ];

    var table = google.visualization.arrayToDataTable(data);

    // Create a dashboard.  
    var dash_container = document.getElementById('dashboard');
    var myDashboard = new google.visualization.Dashboard(dash_container); 			

    // Define a StringFilter control.
    var stringFilter = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'filter',
        'options': {'filterColumnLabel': 'Year'}
    }); 

    // Table visualization  
    var myTable = new google.visualization.ChartWrapper({  
        'chartType' : 'Table',  
        'containerId' : 'table',
        'view': {'columns': [0, 1]} ,
        'dataTable': table,
    });  

    myDashboard.bind(stringFilter, myTable);
    myDashboard.draw(table);

    google.visualization.events.addListener(myTable , 'ready',            function(){
          google.visualization.events.addListener(myTable                   ,'select', tableSelectHandler);
        });

    function tableSelectHandler(e){
      var selection = myTable.getChart().getSelection();
      var t=table.getValue(selection[0].row, 0);
      document.getElementById('label1').innerHTML = t;
    }		

}

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1.1', {packages: ['controls']});</script>
<script type="text/javascript">

  	
</script>
</head>
<body>
	<div id="filter"></div>
	<br>
	<div id="table"></div>
	<br>
	<div id="label1"></div>
</body>
</html>