Google Pie Chart'ı yalnızca javascript/jquery kullanarak bir tıklama etkinliğinde nasıl çizebilirsiniz?

Google Pie Chart'ı yalnızca javascript/jquery kullanarak bir tıklama etkinliğinde nasıl çizebilirsiniz?
Bir onclick olayında drawChart'ı başarılı bir şekilde çağırmayı denedim.Google Pie Chart'ı yalnızca javascript/jquery kullanarak bir tıklama etkinliğinde nasıl çizebilirsiniz?

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

kaynak

2013-08-18 jsky

farkına vardım - basitçe dahil etmek unuttuğunuz için belki sormak jQuery? :-) örneğin 'gibi bir şey - ve bu nedenle girişimleriniz işe yaramadı mı? – davidkonrad

davidkonrad cevabını uzatmak için tıklatma etkinliğini geri aramada t akla yatkın olduğu gibi o API yükleme işlemi tamamlanmadan önce Google'ın sunucularına yavaş bağlantısı olan bir kullanıcı beraberlik düğmesini ki, yükleyici API:

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"]});

kaynak

2013-08-18 15:52:33 asgallant

Bunu yapıyordum, ama neden işe yaramadığını keşfettim. Grafik için div, yalnızca bir tıklama etkinliğinde gösterilmekte olan bir şablondaydı. Divan bu olaydan sonra var değildi, bu yüzden javascript onu bulamadı. – jsky

Sadece OnLoadCallback yerine bir tık işleyicisi içine drawchart çağrısını sarın: API itibaren

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

Tüm komut dosyası:

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

kaynak

2013-08-18 15:06:00 davidkonrad

Google Pie Chart'ı yalnızca javascript/jquery kullanarak bir tıklama etkinliğinde nasıl çizebilirsiniz?

cevap

İlgili konular