#対象者
- 簡単に無料でグラフを作成したい
- html や javascriptについて、一応基本ならわかるよって方
#記事読んだ後にできること
- グラフによるデータの可視化ができるようになる
- グーグルチャートのコードが理解できる
#グーグルチャートとは
今回グラフ化するにあたって、おすすめしたいのがグーグルチャートと呼ばれるものです。
約30種類のチャートがあって、データに合ったものを選ぶことができます。
現時点では、無料で商用利用も可能です。
グーグルチャートギャラリー#グーグルチャートの使い方
使い方は、すっごく簡単。
3分くらいでちゃちゃっとグラフが表示されちゃいます。カップラーメン並み。
##円グラフを作ってみよう
早速、グーグルチャートを使って円グラフを作成してみましょう。
作成するのは、よくある一日のアクティビティを円グラフにしたものです。
###考えるべき4つのこと
グーグルチャートでグラフを作成する際に考えることは、
とりあえず下記の4つだけで大丈夫です。
1. データの用意
2. タイトル(オプションと呼ばれるところ)
3. グラフの形(今回は円グラフ)
4. グラフの表示場所
では実際にコードをみていきましょう。
###コードの書き方
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
javascriptで書かれています。
上をコピーして貼り付けるだけでもグラフができてしまうと思います。
簡単にですが、中身を説明していきます。
###グーグルチャートの呼び出し
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
コードの上の方にある、ここでグーグルチャートのAPIやパッケージを呼び出しています。
これがないとAPIが呼び出されず表示されないので、必ず書いてください。
###設定箇所は4つに分類される
先ほど書いた、グラフを作成する際に必要な「考えるべき4つのこと」を思い出してみましょう。
1. データの用意
2. タイトル(オプションと呼ばれるところ)
3. グラフの形(今回は円グラフ)
4. グラフの表示場所
これをコードに当てはめてみるとこんな感じになっています。
全体をこうやってみてみると、すごく簡単ですよね。
4つをさらに細かくみていきます。
####①データの用意
配列で書くことで、グラフにデータを用意できます。
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
注意する点としては、グラフの種類によって必要なデータ型が異なります。
データ型が異なる場合エラーが出るので、データ型変換をするなりして対処してください。
※円グラフの場合、最初の配列にある['Task', 'Hours per Day']は、どこにも表示されません。
####②タイトル(オプション)
タイトルはここで設定しています。
var options = {
title: 'My Daily Activities'
};
今回は、タイトルの設定だけなのですが、options がすごく豊富なのもグーグルチャートのすごいところです。
サブタイトルの追加やグラフ色の変更、3Dグラフにしたりもできます。
####③グラフの形を指定
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
ここのgoogle.visualization.PieChartで、円グラフにしてねとやっています。
ここをいじるだけで、データ型さえ合っていればグラフがスッと変わります。
例えばgoogle.visualization.LineChartにすると、棒グラフになったりします。便利ッ
####④グラフの表示場所を指定
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
document.getElementById('piechart')のところに注目します。
piechartという部分で、html側のidを指定しています。
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
すると、html側のid="piechart"と紐付き、ここにグラフが表示される仕組みになっています。
#最後に
今回は簡単にグーグルチャートの円グラフの説明だけでしたが、
他のグラフの作成方法もほぼ変わりないので、
この記事である程度なんとなくわかった気がするって方は、是非いろんなグラフも試してみてください。