jede Zeile wickeln über den Link Google Visualization Tabelle

Question

ich ein Pop-Fenster für jede Tabellenzeile haben, sobald sie von

vom Benutzer ausgewählt

google.visualization.events.addListener(table, 'select', function() {} 

Aber Standard Google Visualization Tabellenzeilen nicht als klickbare anzuzeigen.

Ich möchte, dass sie für Benutzer anklickbar angezeigt werden. Also habe ich diesen Code ohne Glück hinzugefügt.

var container = document.getElementById(divName); 
var table = new google.visualization.Table(container); 
table.draw(data, options); 
google.visualization.events.addListener(table, 'ready', function() { 
    container.getElementsByTagName('TR')[0].html = '<a href="#" />'; 
    console.log("table ready"); 
}); 

Sogar Konsole nichts drucken. Jede Hilfe würde geschätzt werden.

Answer 1

wenn Sie nur wollen Sie den Cursor in eine Hand zu ändern, wenn der Benutzer die Zeile schwebt
Sie CSS auf dem Chart div

#chart_div tr { 
    cursor: pointer; 
} 

Sie auch cssClassNames Option des Diagramms die CSS und weisen Sie nutzen könnten verwenden können auf diese Weise
einzige Problem ist Sie die Diagramm Standard CSS verlieren,
so müssen mehr als nur cursor

liefern, wenn Sie eine wollen " Hyperlink‘zeigen, können Sie den Text der ersten Zelle
aber Sie wickeln kann nicht ganze Zeilen in einem Anker-Tag <a>

siehe folgende Arbeits Schnipsel, die beide ...

ändern

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Month', '2015', '2016'], 
 
     ['Jan', 10, 15], 
 
     ['Feb', 12, 18], 
 
     ['Mar', 14, 21], 
 
     ['Apr', 16, 24] 
 
    ]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.Table(container); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     var tableRows = container.getElementsByTagName('tbody')[0].rows; 
 
     // change first cell to link 
 
     Array.prototype.forEach.call(tableRows, function(row) { 
 
     row.cells[0].innerHTML = '<a href="#">' + row.cells[0].innerHTML + '</a>'; 
 
     }); 
 
    }); 
 

 
    chart.draw(data, { 
 
     allowHtml: true 
 
    }); 
 
    }, 
 
    packages: ['table'] 
 
});

#chart_div tr { 
 
    cursor: pointer; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

enthält