コニファ・ロゴ

ツール集:Google Chart APIを使って、ブラウザシェア(2016年11月)のパイチャート

アクセスログを見ると、ブラウザのシェアで、IEがひところよりだいぶ落ちてきたよう(Safariよりも下位に)なので、具体的な数値で確認してみました。データは、StatCounterの2016年11月現在のものを利用させていただきました。

円グラフは、Google Chartsのpiechartを利用しています。グラフの各ピースにオンマウスすると詳細を表示します。

piechartのソース

  1. <script src="js/timedropper.min.js"></script>
  2. <!--Load the AJAX API-->
  3. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  4. <script type="text/javascript">
  5. // Load the Visualization API and the corechart package.
  6. google.charts.load('current', {'packages':['corechart']});
  7. // Set a callback to run when the Google Visualization API is loaded.
  8. google.charts.setOnLoadCallback(drawChart);
  9. // Callback that creates and populates a data table,
  10. // instantiates the pie chart, passes in the data and
  11. // draws it.
  12. function drawChart() {
  13. // Create the data table.
  14. var data = new google.visualization.DataTable();
  15. data.addColumn('string', 'Topping');
  16. data.addColumn('number', 'Slices');
  17. data.addRows([
  18. ['Chrome', 59.05],
  19. ['Firefox', 13.49],
  20. ['Safari', 10.38],
  21. ['IE', 8.8],
  22. ['Edge', 2.93],
  23. ['Opera', 1.84],
  24. ['その他', 3.51]
  25. ]);
  26. // Set chart options
  27. var options = {'title':'世界のブラウザシェア・2016年11月現在',
  28. 'width':600,
  29. 'height':400};
  30. // Instantiate and draw our chart, passing in some options.
  31. var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  32. chart.draw(data, options);
  33. }
  34. </script>

世界のブラウザシェア(2016年11月)

 

※引用、参考(Google Chartsのpiechart):
https://developers.google.com/chart/interactive/docs/gallery/piechart

 

戻るボタン