Web/DTP

Google chart tools で円グラフ作成

えだ

更新日:2021/08/04

つづきましてはグラフAPIの紹介です。

Google chart tools で円グラフ作成

Google が提供しているAPI「Google chart tools」では色々なグラフが描けるのですが、今回は円グラフに挑戦してみます。

動作検証を行ったのは次のバージョンです。
Google Chrome 43.0.2357.130 m

実行結果

ソースコード

<head>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">
		google.load('visualization', '1.0', {'packages':['corechart']});
		google.setOnLoadCallback(drawChart);
		function drawChart() {
			var data = new google.visualization.DataTable();
			data.addColumn('string', 'Shop');
			data.addColumn('number', 'Sales');
			data.addRows([
				['ピ○ーラ', 432],
				['ピ○ハット', 256],
				['ドミノピ○', 218],
			]);
			var options = {
				'title': '宅配ピザ売上シェア',
				'width': 400,
				'height': 300,
				is3D: true
			};
			var chart = new google.visualization.PieChart(document.getElementById('chartarea'));
			chart.draw(data, options);
		}
	</script>
</head>
<body>
	<div id="chartarea"></div>
</body>

<head>

google.load('visualization', '1.0', {'packages':['corechart']});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Shop');

data.addColumn('number', 'Sales');

data.addRows([

['ピ○ーラ', 432],

['ピ○ハット', 256],

['ドミノピ○', 218],

]);

var options = {

'title': '宅配ピザ売上シェア',

'width': 400,

'height': 300,

is3D: true

};

var chart = new google.visualization.PieChart(document.getElementById('chartarea'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

解説

ポイントは次の３点です。

data.addColumnで項目定義
data.addRowsでデータ設定
optionsでオプション指定（任意）

たったこれだけです。
動的サイトであってもこのポイント部分が規則的に纏まっているので操作が容易ですね。

参考情報

公式リファレンス　https://developers.google.com/chart/

無意味なコメント

データは「マツコの知らないデリバリーピザの世界」を観てしまったので御三家を調べたものです。
それにしても昔と違い今ではAPIが充実しているのでWebシステムでもグラフを作るのが苦にならないですね。

≪Ajaxで非同期通信してみるよー

タスクスケジューラに登録したタスクが失敗した時に自動でメールを送信する≫

Google chart tools で円グラフ作成

Google chart tools で円グラフ作成

実行結果

ソースコード

解説

参考情報

無意味なコメント

関連記事

BlenderのデータをWEBサイトに表示させる方法！

FIELDSETタグとLEGENDタグについて

CSSの最新事情を調べてみた