Google Chartで円グラフ表示

円グラフ

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Google Chart</title>
</head>
<body>
  <div id="target"></div>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    (function() {
      'use strict';

        // パッケージのロード
        google.charts.load('current', {packages: ['corechart']});
        // コールバックの登録
        google.charts.setOnLoadCallback(drawChart);

        // コールバック関数の実装
        function drawChart() {
            // データの準備
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Love');
            data.addColumn('number', 'Votes');
            data.addRow(['あああ党', 40]);
            data.addRow(['いいい党', 25]);
            data.addRow(['ううう党', 12]);

            // オプションの準備
            var options = {
                title: '投票結果',
                width: 800,
                height: 600
            };

            // 描画用インスタンスの生成および描画メソッドの呼び出し
            var chart = new google.visualization.PieChart(document.getElementById('target'));
            chart.draw(data, options);
        }


    })();
  </script>
</body>
</html>

コメント

タイトルとURLをコピーしました