come disegnare un grafico a torta di Google solo su un evento click utilizzando javascript/jquery?

come disegnare un grafico a torta di Google solo su un evento click utilizzando javascript/jquery?
Ive ha provato a chiamare drawChart su un evento onclick senza successo.come disegnare un grafico a torta di Google solo su un evento click utilizzando javascript/jquery?

Dal api:

<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', 'Hours per Day'], 
      ['Work',  11], 
      ['Eat',  2], 
      ['Commute', 2], 
      ['Watch TV', 2], 
      ['Sleep', 7] 
     ]); 

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

     var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="piechart" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

fonte

2013-08-18 jsky

Ho appena realizzato - forse si chiede perché semplicemente avete dimenticato di includere jquery? :-) per esempio qualcosa come '' - e questo è il motivo per cui i tuoi tentativi non hanno funzionato? – davidkonrad

Per estendere la risposta di davidkonrad , dovresti avvolgere l'evento click nel callback da t egli api loader, come è plausibile che un utente con una connessione lenta ai server di Google potrebbe fare clic sul pulsante pareggio prima che l'API è terminato il caricamento:

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work',  11], 
     ['Eat',  2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
    ]); 

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

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
    chart.draw(data, options); 
} 
function initialize() { 
    $(/* click event element selector */).click(function() { 
     drawChart(); 
    }); 
} 
google.setOnLoadCallback(initialize); 
google.load("visualization", "1", {packages:["corechart"]});

fonte

2013-08-18 15:52:33 asgallant

Lo stavo facendo, ma ho scoperto perché non funzionava. Il div per il grafico era in un modello che a sua volta veniva mostrato solo in un evento click. Il div non esisteva fino a dopo quell'evento, quindi il javascript non riusciva a trovarlo. – jsky

Basta avvolgere la chiamata a drawchart in un gestore di clic, invece di OnLoadCallback:

$('html, body').click(function() { 
    drawChart(); 
    });

intero script:

<script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'Hours per Day'], 
      ['Work',  11], 
      ['Eat',  2], 
      ['Commute', 2], 
      ['Watch TV', 2], 
      ['Sleep', 7] 
     ]); 

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

     var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
     chart.draw(data, options); 
     } 

     $('html, body').click(function() { 
     drawChart(); 
     }); 

    </script>

fonte

2013-08-18 15:06:00 davidkonrad

come disegnare un grafico a torta di Google solo su un evento click utilizzando javascript/jquery?

risposta

Problemi correlati