Créer cliquable élément dans Google Visualisation graphique en ligne

Est-il possible de joindre un onclick méthode aux éléments à l'intérieur d'un Google Visualisation graphique en ligne? Par exemple, si un utilisateur clique sur le point dans le graphique que je veux envoyer l'utilisateur vers une page avec plus de détails. Je suis allé à tous grâce à la documentation et ne peut pas trouver un exemple de comment faire cela.

Je vois qu'il existe des méthodes pour les événements (à partir de la la documentation), mais sans exemple clair qu'il ne fait pas beaucoup de sens.

Merci!

OriginalL'auteur Eric Lamb | 2011-07-11

  1. 7

    Vous pouvez le faire à l'aide d'un 'select' événement, qui sera déclenchée chaque fois qu'un utilisateur clique sur un point de la ligne graphique. J'ai inclus un exemple ci-dessous, y compris la redirection avec un couple de valeurs. Le code Google aire de jeu est un bel exemple de comment utiliser les gestionnaires d'événements sur une table - le même type de fonctionnalité peut être utilisée dans la plupart des visualisations.

    <!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>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['barchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
//Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
});
//a click handler which grabs some values then redirects the page
google.visualization.events.addListener(chart, 'select', function() {
//grab a few details before redirecting
var selection = chart.getSelection();
var row = selection[0].row;
var col = selection[0].column;
var year = data.getValue(row, 0);
location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
    Elle devrait l'être: l'emplacement.href = 'google.com?ligne=' + ligne + " &col=' + col + '&annee=' + an; (le titre n'est pas défini)

    OriginalL'auteur oli

  2. 1

    getSelection().la colonne n'est pas de travail, il retourne un "inconnu" de la valeur. La question a été publiée dans la Google Visualisation de l'API de rapports de bogue page.

    je pense que c'est parce que getSelection () retourne un tableau, donc vous devriez faire getSelection()[n].colonne
    Sur le rapport de bug lien ci-dessus, il y a un exemple de code dans le fond qui montre que le nombre de ligne est très bien, il ne fonctionne pas seulement pour le numéro de la colonne.

    OriginalL'auteur Cristiano Maia