2011-06-01 52 views
12

¿Puedo agregar enlaces en google chart api?Cómo agregar enlaces en google chart api

Por ejemplo,

enter image description here

¿Cómo podría añadir un enlace a "trabajo" o "comer"?

Gracias!

+0

No creo que pueda insertar el código html allí. –

+0

Sí, lo intenté pero no puedo. ¿Alguna sugerencia? –

+0

No creo que sea factible ya que no hay elemento de tipo de etiqueta, solo cadena para API de visualización. Convierte automáticamente las etiquetas a texto normal. Es posible utilizar etiquetas de anclaje en SVG: http://www.w3.org/TR/SVG/images/linking/link01.svg, pero no creo que Google API lo permita por ahora. Puede hacer preguntas en el foro de soporte: http://groups.google.com/group/google-visualization-api. Por lo general, son buenos para contestar. –

Respuesta

12

http://code.google.com/apis/chart/interactive/docs/events.html

<script type="text/javascript"> 
google.load('visualization', '1', {'packages':['corechart']}); 
google.setOnLoadCallback(drawChart); 
function drawChart() 
{ 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Count'); 

    data.addRows([ ['Value A',5 ],['Value B',61 ],['Value C',53 ],['Value D',22 ] ]); 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, {width: 400, height: 280, is3D: true, title: ''}); 

    google.visualization.events.addListener(chart, 'select', selectHandler); 

    function selectHandler(e)  { 
     alert(data.getValue(chart.getSelection()[0].row, 0)); 
    } 

} 

</script> 
25

respuesta de Lucky Frank es bueno, pero sólo imprime un cuadro de alerta. Aquí hay una respuesta más completa. Puse los enlaces en el DataTable, luego creo un DataView para que no se pasen al gráfico.

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'link', 'Hours per Day'], 
      ['Work', 'http://www.thefreedictionary.com/work', 11], 
      ['Eat', 'http://www.thefreedictionary.com/eat', 2], 
      ['Commute', 'http://www.thefreedictionary.com/commute', 2], 
      ['Watch TV', 'http://www.thefreedictionary.com/television',2], 
      ['Sleep', 'http://www.thefreedictionary.com/sleep', 7] 
     ]); 

     var view = new google.visualization.DataView(data); 
     view.setColumns([0, 2]); 

     var options = { 
      title: 'My Daily Activities' 
     }; 

     var chart = new google.visualization.PieChart( 
      document.getElementById('chart_div')); 
     chart.draw(view, options); 

     var selectHandler = function(e) { 
     window.location = data.getValue(chart.getSelection()[0]['row'], 1); 
     } 

     // Add our selection handler. 
     google.visualization.events.addListener(chart, 'select', selectHandler); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 900px;"></div> 
    </body> 
</html> 

Por cierto, Google Charts API really rocks! Gracias a quien escribió esto.

+0

Wow Mark Butler ¡He estado buscando esto para siempre! Perdón por responder a un hilo viejo, pero ¿sabes cómo uno podría hacer que esto funcione usando MySQL? Actualmente estoy usando MySQL con mi tabla existente de Google, pero uso dos páginas, una para el gráfico y otra para el json. ¡Gracias! – Spartacus38

+0

¿Qué tal https://developers.google.com/chart/interactive/docs/php_example? –

+0

Sí, eso es básicamente exactamente cómo se ve mi código, pero eso no explica cómo obtener una cadena de SQL y convertirla en un enlace. Mi gráfico funciona perfectamente bien, pero ahora quiero más profundidad donde hacen clic en el punto y ver los detalles de las métricas. – Spartacus38

-3

Simplemente uso el comando echo. Puede simplemente reemplazar el texto entre una coma con una declaración de php echo. por ejemplo, podría reemplazar el 11 con un enlace a datos sql:

['Work', 'http://www.thefreedictionary.com/work', < ? php echo $row_rs_age_total['Old']], $row_rs_age_total['Old']; ?>], 
Cuestiones relacionadas