【Google Charts】円グラフを描画する例|データ・オプションの設定方法
今回は、Google Charts(グーグルチャート)を利用し、円グラフを描画する例となり、円グラフのデータやオプションを設定する方法となります。
【Google Charts】円グラフを描画する例
例では、Google Chartsを利用して次のような円グラフを作成しています。
以下、グラフを作成するソースコードの例となり、HTMLファイルに記述します。
また、ライブラリローダーの読み込み・スクリプトの部分は、bodyの最後に追加しても機能します。
<!-- ライブラリローダーを読み込み -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 利用するGoogle Chartsのパッケージをロード後、グラフを描画する関数を呼び出し
google.charts.load(
'current',
{'packages':['corechart']}
)
.then(drawChart);
// グラフの設定・描画を行う関数
function drawChart() {
// グラフのデータを設定するインスタンスを作成
var data = new google.visualization.DataTable();
data.addColumn('string');
data.addColumn('number');
data.addRows([
['玉ねぎ', 4],
['イカ', 2.5],
['アサリ', 2.5],
['ユビ', 1]
]);
// グラフのオプションを設定
var options = {
'title':'【ピザ服部】シーフードピザのトッピング割合',
'width':400,
'height':300,
'is3D': true
};
// グラフを描画するためのインスタンスを作成
var chart = new google.visualization.PieChart(document.getElementById('google_chart'));
// グラフにデータ・オプションをセットして描画
chart.draw(data, options);
}
</script>
<!-- グラフを表示 -->
<div id="google_chart"></div>
円グラフを描画する関数について
以下は、例のソースコードの中で、円グラフを描画する関数の箇所についての説明となります。
Google Chartsの基本的な利用方法については、以下のリンク先を参考にしてみてください。
円グラフのデータを設定
グラフで利用するデータを設定する方法はいくつかありますが、今回はgoogle.visualization.DataTableクラスのインスタンスを利用しています。
上記ソースコードでは15行目からの次の箇所となります。
// グラフのデータを設定するインスタンスを作成
var data = new google.visualization.DataTable();
data.addColumn('string');
data.addColumn('number');
data.addRows([
['玉ねぎ', 4],
['イカ', 2.5],
['アサリ', 2.5],
['ユビ', 1]
]);
グラフのデータの設定にはインスタンスのメソッドを利用します。また、グラフのデータはテーブルとなり、グラフの種類によって指定するデータが異なります。
例の円グラフの場合、カラムの設定を行うaddColumnメソッドと、レコードのデータを設定するaddRowsメソッドを、次のように指定しています。
addColumnメソッド
最初のaddColumnメソッドの引数には'string'を指定します。それにより、このカラムの値には文字列を入れることができ、円グラフの構成要素の名前が入ります。
次のaddColumnメソッドの引数には'number'を指定します。それにより、このカラムの値には数値を入れることができ、円グラフの構成要素の割合が入ります。
上記の場合、第2引数にカラムのラベル、第3引数にカラムを識別するidを指定することもできます。
また、addColumnメソッドは、その他の方法でカラムの設定もできます。詳しくは文末の参考サイト内を確認してみてください。
addRowsメソッド
addRowsメソッドの引数をMapで指定し、キーには円グラフの構成要素の名前、値には円グラフの構成要素の割合を指定し、フィールドのデータを設定します。
円グラフのデータ例
今回の例の場合、インスタンスで設定したデータは次のようなテーブルとなり、円グラフの構成要素を表します。
0(インデックス) string(タイプ) | 1(インデックス) number(タイプ) |
玉ねぎ | 4 |
イカ | 2.5 |
アサリ | 2.5 |
ユビ | 1 |
円グラフのオプションを設定
グラフのオプションはオブジェクトで指定できます。
上記ソースコードでは26行目からの次の箇所となります。
// グラフのオプションを設定
var options = {
'title':'【ピザ服部】シーフードピザのトッピング割合',
'width':400,
'height':300,
'is3D': true
};
例では、次の円グラフのオプションを設定しています。
キー | 値 |
title | グラフに表示するタイトル |
width | グラフを表示する要素の横幅 |
height | グラフを表示する要素の高さ |
is3D | trueを指定すると、グラフを立体的に表示 |
その他のオプションの指定方法については、文末の参考サイト内を確認してみてください。
円グラフを描画するためのインスタンスを作成
円グラフを描画は、google.visualization.PieChartクラスのインスタンスを作成し、drawメソッドで行います。
上記ソースコードでは34行目からの次の箇所となります。
// グラフを描画するためのインスタンスを作成
var chart = new google.visualization.PieChart(document.getElementById('google_chart'));
// グラフにデータ・オプションをセットして描画
chart.draw(data, options);
作成したインスタンスの引数は、グラフを表示するHTML要素を指定するため、要素にアクセスするメソッドとなります。
例では引数にはidの属性値に'google_chart'をもつ要素にアクセスするメソッドを指定します。
そして、グラフの描画はインスタンスのdrawメソッドで行います。その際に、drawメソッドの第1引数にグラフのデータを、第2引数にオプションを指定します。