google chartsで円グラフを描画します。
<!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="UTF-8"> <title>Google chart</title> <script src="https://www.google.com/jsapi"></script> <script> google.load('visualization', '1.0', {'packages' : ['corechart']}); google.setOnLoadCallback(drawChart); function drawChart(){ // データを用意 // グラフのオプション // 描画する var data = new google.visualization.DataTable(); data.addColumn('string', '活動'); data.addColumn('number', '時間'); data.addRows([ ['睡眠', 8], ['仕事', 12], ['ネット', 4], ]); var options = { title: '一日の内訳', width: 500, height: 500, pieSliceText: 'label', is3D: true } var chart = new google.visualization.PieChart(document.getElementById('chart')); chart.draw(data, options); } </script> <body> <div id="chart"></div> <h1></h1> <p></p> </body> </html>