コニファ・ロゴ

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

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

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

piechartのソース

<script src="js/timedropper.min.js"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {
  // Create the data table.
  var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Chrome', 59.05],
      ['Firefox', 13.49],
      ['Safari', 10.38],
      ['IE', 8.8],
      ['Edge', 2.93],
      ['Opera', 1.84],
      ['その他', 3.51]
  ]);
  // Set chart options
  var options = {'title':'世界のブラウザシェア・2016年11月現在',
      'width':600,
      'height':400};
  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
  }
</script>

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

 

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

 

戻るボタン