如何仅在使用javascript/jquery的单击事件上绘制Google饼图？

如何仅在使用javascript/jquery的单击事件上绘制Google饼图？
我曾尝试在onclick事件中调用drawChart而没有成功。如何仅在使用javascript/jquery的单击事件上绘制Google饼图？

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

来源

2013-08-18 jsky

我才意识到 - 也许你问，因为你只是忘记了包括jQuery的？ :-)例如像'' - 这就是为什么你的尝试没有奏效？ – davidkonrad

为了延长davidkonrad的答案，你应该在t中回调click事件他API载入程序，因为它是合理的，该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

只是包装调用drawchart成点击事件处理，而不是OnLoadCallback：

$('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饼图？

回答

相关问题