jQuery Girl
  1. jQuery Girl
  3. Comment définir un événement pour Google chart?
Intereting Posts
Jquery datepicker beforeShow ne semble pas passer l’instance Suppression de l’API showModalDialog Remplissage d’une zone de sélection en fonction de la sélection dans une autre zone de sélection – JQuery? Trier la table avec jQuery après quelques tr Ajouter une légende à un graphique en anneau – jqPlot Pourquoi mon formulaire jquery ajax est-il soumis une fois, une première fois, deux fois une seconde fois…? 2d trajectoire de projectile? Problèmes de mise à l’échelle Fancybox dans les appareils mobiles orientés vers le paysage de faible hauteur JavaScript local peut-il éditer / sauvegarder des fichiers sur la même machine locale? Comment utiliser jQuery? Fancybox bloqué chargement iframe dans IE Comment appeler des actions de contrôleur à l’aide de JQuery dans ASP.NET MVC Javascript – Changer la largeur de la bordure sans déplacer les éléments environnants. Désactiver toutes les cases sauf une audio HTML ne peut pas trouver le fichier après avoir changé de source via jQuery d3js aster plot label affiche comme arc

Comment définir un événement pour Google chart?

Bonjour, J’utilise Google API pour dessiner un graphique, mais je souhaite définir un événement pour chaque rangée de ce tableau, mais je ne sais pas comment collecter cet élément alert("Magnolia Room clicked");
Lien Google chart:
Tableau chronologique Google
voici le code graphique Google javascript: 

    google.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.3'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'ssortingng', id: 'Room' }); dataTable.addColumn({ type: 'ssortingng', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,21,30,0), new Date(0,0,1,0,30,0) ]]); var options = { timeline: { colorByRowLabel: true }, backgroundColor: '#ffd' }; chart.draw(dataTable, options); }

Et mon HTML: 

    sample

Est-il possible de définir un événement pour eux?

Vous pouvez utiliser un gestionnaire d’événements “select” pour cela: 

 google.visualization.events.addListener(chart, 'select', function () { var selection = chart.getSelection(); if (selection.length) { alert(dataTable.getValue(selection[0].bb, 0) + ' clicked'); } });

Veuillez noter que les informations de sélection sont actuellement boguées. Les objects de sélection doivent avoir des propriétés de row et de column , mais ces propriétés sont obscurcies. Vous devez donc accéder aux index de ligne à partir de la propriété bb . La visualisation Chronologie définit l’index de la colonne sur null pour toutes les sélections. Vous n’avez donc pas à vous soucier de celle-ci.