JavaScript[グラフ作成]

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

Google Charts

棒グラフ

下記コードは

<script src="https://www.gstatic.com/charts/loader.js"></script> 

google.charts.load("current", {"packages":["corechart"]});
google.charts.setOnLoadCallback(myChart);

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>グラフの表示</title>
 </head>
 <body>
  <h3>棒グラフのサンプル</h3>
  <div id="mychart" style="width: 800px; height: 600px;"></div>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
  google.charts.load("current", {"packages":["corechart"]});
  google.charts.setOnLoadCallback(myChart);

  function myChart() {
   var data = google.visualization.arrayToDataTable([
    ["動物",      "人数", { role:"style" }],
    ["犬",            11, "red"   ],
    ["猫",             8, "orange"],
    ["ハムスター",     3, "yellow"],
    ["鳥",             2, "green" ],
    ["魚",             2, "blue"  ],
    ["その他",         1, "pink"  ],
    ["ペットはいない", 7, "gray"  ]
   ]);

   var options = {
    title:"３年１組のみんなのペット",
   };

   var chart = new google.visualization.ColumnChart(document.getElementById("mychart"));
   chart.draw(data, options);
  }
  </script>
 </body>
</html>

円グラフ

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>グラフの表示</title>
 </head>
 <body>
  <h3>円グラフのサンプル</h3>
  <div id="mychart" style="width:800px; height:600px;"></div>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
  google.charts.load("current", {"packages":["corechart"]});
  google.charts.setOnLoadCallback(myChart);

  function myChart() {
   var data = google.visualization.arrayToDataTable([
    ["動物",      "人数"],
    ["犬",            11],
    ["猫",             8],
    ["ハムスター",     3],
    ["鳥",             2],
    ["魚",             2],
    ["その他",         1],
    ["ペットはいない", 7]
   ]);

   var options = {
    title:"３年１組のみんなのペット",
    slices: {
     0: { color: "darkRed" },
     1: { color: "orange" },
     2: { color: "pink" },
     3: { color: "lime" },
     4: { color: "blue" },
     5: { color: "red" },
     6: { color: "gray" }
    }
   };

   var chart = new google.visualization.PieChart(document.getElementById("mychart"));
   chart.draw(data, options);
  }
  </script>
 </body>
</html>

Google Chartsホームページhttps://developers.google.com/chart/interactive/docs/reference