Google Charts

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>

piechart