2011-06-01 23 views
12

Bağlantı ekleyebilir miyim google chart api? Örneğin Haritaya nasıl link eklenir api

,

enter image description here

nasıl "İş" veya "Eat" bağlantısını eklemek olabilir?

Teşekkürler!

+0

Orada html kodu ekleyebileceğinize inanmıyorum. –

+0

Evet, denedim ama yapamam. Baska öneri? –

+0

Etiket türü öğe olmadığından, yalnızca görselleştirme API'sı için bir dize olduğundan emin olun. Etiketleri otomatik olarak normal metne dönüştürür. Bağlantı etiketlerini SVG'de kullanmak mümkündür: http://www.w3.org/TR/SVG/images/linking/link01.svg, ancak Google API'nin şimdilik buna izin verdiğini düşünmüyorum. Destek forumuna sorular sorabilirsiniz: http://groups.google.com/group/google-visualization-api - yanıtlamak genellikle iyi olur. –

cevap

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

Şanslı Frank'ın cevabı iyidir, ama sadece bir uyarı kutusu yazdırır. İşte daha eksiksiz bir cevap. Bağlantıları DataTable'a koydum, sonra DataView oluşturun, böylece bunlar grafiğe aktarılmaz.

<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> 

BTW, Google Grafikler API gerçekten sallanıyor! Bunu yazan herkese teşekkürler.

+0

Wow Mark Butler Bunun için sonsuza kadar aradım! Eski bir ileti dizisine cevap verdiğim için üzgünüm, ancak bunu MySQL kullanarak nasıl çalıştırabileceğini biliyor musunuz? Şu anda mevcut google grafiğimle MySQL kullanıyorum, ancak iki sayfa, biri grafik için ve diğeri json için kullanıyorum. Teşekkürler! – Spartacus38

+0

https://developers.google.com/chart/interactive/docs/php_example nasıl? –

+0

Evet, tam olarak kodumun nasıl göründüğü tam olarak budur, ancak bu SQL'den bir dize nasıl alınacağını ve bir bağlantıya nasıl dönüştürüleceğini açıklamıyor. Grafiğim mükemmel çalışıyor, ancak şimdi noktaya tıkladıkları ve metriklerin ayrıntılarını görüntüledikleri daha fazla derinlik istiyorum. – Spartacus38

-3

Sadece echo komutunu kullanıyorum. Sadece bir virgül ile bir php echo ifadesi arasındaki metni değiştirebilirsiniz. örneğin 11'i bir sql veri bağlantısıyla değiştirebilirsiniz:

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