SQLの窓

2014年03月29日


JavaScript : 誰でもすぐ使える Google 円グラフ

Ggpiechart

※ 凡例をクリックすると、その部分が飛び出ます
※ グラフをクリックすると、データが表示されます。
※ 誰でもすぐ使えます

addColumn を2回していますが、Excel の表を2列作ったのと同じで、タイトルとデータ型を設定して、行を7つ作っています。後は、セルにデータとタイトルをセットしていると思って下さい。





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>google 円グラフ</title>
</head>
<body>

<div id="chart_div" style="width: 400px; height: 240px;"></div>

<script charset="utf-8" type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
google.load("visualization", "1", {packages: ["piechart"]});

google.setOnLoadCallback(drawChart);
function drawChart() {

	var data = new google.visualization.DataTable();
	data.addColumn('string', '対象');
	data.addColumn('number', '件数');
	data.addRows(7);

	data.setValue(0, 0, '対象A');
	data.setValue(0, 1, 2000);
	data.setValue(1, 0, '対象B');
	data.setValue(1, 1, 3000);
	data.setValue(2, 0, '対象C');
	data.setValue(2, 1, 1500);
	data.setValue(3, 0, '対象D');
	data.setValue(3, 1, 500);
	data.setValue(4, 0, '対象E');
	data.setValue(4, 1, 200);
	data.setValue(5, 0, '対象F');
	data.setValue(5, 1, 215);
	data.setValue(6, 0, '対象G');
	data.setValue(6, 1, 20);

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

	chart.draw(data, {width: 600, height: 320, is3D: true, title: '円グラフのタイトル'});
}
</script>

</body>
</html>


Google のリファレンス

Visualization: Pie Chart


関連する記事

JavaScript : 誰でもすぐ使える Google 円グラフ(2) : データを Google ドキュメントから取得する

Google ドキュメントを使用して、円グラフ(visualization / piechart )を作成する

jQuery + Google Visualization : 円グラフのプラグイン化


タグ:google
【JavaScript ライブラリの最新記事】
posted by lightbox at 2014-03-29 20:37 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり