<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); var under20 = 0; var age20 = 0; var age30 = 0; var age40 = 0; var age50 = 0; var age60 = 0; var over70 = 0; $("#index").live('pagecreate',function(){ google.setOnLoadCallback(drawChart("")); }); $(function(){ $("#under20").live("click",function(){ drawChart("under20") }); $("#age20").live("click",function(){ drawChart("age20") }); $("#age30").live("click",function(){ drawChart("age30") }); $("#age40").live("click",function(){ drawChart("age40") }); $("#age50").live("click",function(){ drawChart("age50") }); $("#age60").live("click",function(){ drawChart("age60") }); $("#over70").live("click",function(){ drawChart("over70") }); $("#reset").live("click",function(){ under20 = 0; age20 = 0; age30 = 0; age40 = 0; age50 = 0; age60 = 0; over70 = 0; $("iframe").attr({ width:"400px", height:"200px" }); drawChart(""); }); }); function drawChart(age){ switch(age){ case "under20": under20++; break; case "age20": age20++; break; case "age30": age30++; break; case "age40": age40++; break; case "age50": age50++ break; case "age60": age60++; break; case "over70": over70++; break; default: break; } var data = new google.visualization.DataTable(); data.addColumn('string', '年代'); data.addColumn('number', '割合'); data.addRows([ ['20歳未満', under20], ['20代', age20], ['30代', age30], ['40代', age40], ['50代', age50], ['60代', age60], ['70代以上', over70], ]); var options = { title: '年代別割合チャート' }; var chart = new google.visualization.PieChart(document.getElementById('chart')); chart.draw(data, options); } </script> <title></title> </head> <body> <div data-role="page" id="index"> <div data-role="header"> <h1>年代別割合チャート</h1> </div> <div data-role="content"> <div data-role="controlgroup" data-type="horizontal"> <a data-role="button" id="under20">20代未満</a> <a data-role="button" id="age20">20代</a> <a data-role="button" id="age30">30代</a> <a data-role="button" id="age40">40代</a> <a data-role="button" id="age50">50代</a> <a data-role="button" id="age60">60代</a> <a data-role="button" id="over70">70代以上</a> </div> <a data-role="button" id="reset">リセット</a> <div id="chart"></div> </div> <div data-role="footer"> <h4>Yohsuke Nakano</h4> </div> </div> </body> </html>