javascript/jqueryを使用してクリックイベントでのみGoogle Pie Chartを描画する方法はありますか？

javascript/jqueryを使用してクリックイベントでのみGoogle Pie Chartを描画する方法はありますか？
Iveは、onclickイベントでdrawChartを呼び出してみましたが、成功しませんでした。 APIからjavascript/jqueryを使用してクリックイベントでのみGoogle Pie Chartを描画する方法はありますか？

：

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

出典

2013-08-18 jsky

私はちょうど実現 - あなたは、単に含めるのを忘れているので、多分あなたは尋ねますjquery？ :-)例えば、 ''のようなもので、あなたの試みがうまくいかなかった理由は？ – davidkonrad

をdavidkonradの答えを拡張するにはあなたはtからコールバックのclickイベントをラップする必要がありますそれはもっともらしいように彼は、APIがロード完了する前に、Googleのサーバーへの接続速度が遅いと、ユーザが描画]ボタンをクリックしてできること、ローダーを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"]});

出典

2013-08-18 15:52:33 asgallant

私はこれをやっていましたが、なぜそれが働いていなかったのかを発見しました。グラフのdivはテンプレート内にあり、それ自体はクリックイベントでのみ表示されていました。そのイベントの後までdivは存在しなかったので、javascriptはそれを見つけることができませんでした。 – jsky

だけではなく、OnLoadCallbackのクリックハンドラにdrawchartへの呼び出しをラップ：

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

スクリプト全体：

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

出典

2013-08-18 15:06:00 davidkonrad

javascript/jqueryを使用してクリックイベントでのみGoogle Pie Chartを描画する方法はありますか？

答えて

関連する問題