Cómo agregar un enlace a una parte del gráfico circular de Google

Mi pregunta tal vez un poco confusa por lo que voy a explicar.

Utilicé Google Charts para hacer un gráfico circular simple. Funciona muy bien Lo que necesito saber es poder vincular todas las secciones / partes del pastel para mostrar una ventana emergente de diálogo / modal de jquery.

Busco desde hace mucho tiempo pero todavía no puedo encontrar nada cerca de eso.

Gracias a todos por leer y espero que alguien me pueda ayudar 🙂

Aquí mi código para mostrar mi gráfico

  google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Clan'); data.addColumn('number', 'Vampire'); data.addRows([ toDisplay as $oClan) { echo "['".$oClan->getName()."', ".count($oClan->getMembers()).']'; echo ", "; } ?> ]); var options = {'title':'Effectif des clans', 'width':600, 'height':600}; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }   

Aquí el código con el oyente que hace lo que yo quería 🙂

     google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Clan'); data.addColumn('number', 'Vampire'); data.addRows([ toDisplay as $oClan) { echo "['".$oClan->getName()."', ".count($oClan->getMembers()).']'; echo ", "; } ?> ]); var options = {'title':'Effectif des clans', 'width':600, 'height':600}; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); function selectHandler() { var selectedItem = chart.getSelection()[0]; if (selectedItem) { var topping = data.getValue(selectedItem.row, 0); alert('The user selected ' + topping); } } google.visualization.events.addListener(chart, 'select', selectHandler); chart.draw(data, options); }    

Echa un vistazo al evento seleccionado ; puede configurar su propio oyente para que reaccione al hacer clic en los sectores de tarta (icCube tiene un ejemplo aquí ).

Esta es una pregunta difícil, y esta no es una respuesta completa, sino una pista sobre cómo podría resolver este problema.

En este tipo de situaciones, hay 3 casos:

  1. Hay una manera de hacerlo en la API. Supongo que no es el caso, porque debe haber leído detenidamente la documentación y, si hubiera una manera de hacerlo a través de la API, alguien ya habría respondido esta pregunta; =)
  2. La implementación de la biblioteca proporciona ganchos de extensión. Debes mirar el código fuente para ver si puedes extender el gráfico circular para crear tu propio gráfico circular y agregar un enlace en cada porción de pastel. Existe una buena probabilidad de que sea posible, pero puede ser difícil controlar su diseño, su código y su entorno técnico lo suficiente para hacerlo. De todos modos, realmente deberías intentarlo si tienes tiempo, puedes aprender mucho haciendo esto y boostás tu valor como desarrollador al hacerlo.
  3. Dios, si existes, perdóname por escribir esto. Si no puedes codificarlo o conectarlo, córtalo. Puedes usar el insepctor para estudiar la estructura del SVG generado después del renderizado, y construir un buen selector jQuery y parchear el svg.

     $mySvgElement.find("g") .get(indexComputedFromRetroengineering) .whatEverMakesYourPieSliceALink() ; 

El tercer método tiene muchos inconvenientes, incluidos los siguientes (pero no solo):

  • Debe comprobar cada una de las plataformas de destino para ver si su hack funciona, ya que el SVG generado podría ser diferente al problema específico de la plataforma alternativa. Incluso podría ser VML o Canvas (no sé qué hace Google Chart con respecto a este punto, pero muchas tecnologías de representación de conmutadores de bibliotecas de gráficos según el contexto)
  • Es posible que tenga que volver a escribir una parte de su truco si actualiza la biblioteca, ya que pueden cambiar la estructura del SVG generado.
  • El día que alguien tenga que trabajar en su código, él / ella lo odiará. E incluso si solo saben que estás haciendo eso te odiarán.
  • Irás al infierno.

Pero puede ser en algunos casos la única manera. Depende de cuánto lo desee y, si conoce los inconvenientes y los costos ocultos, está listo para pagar ese precio.