Google Chartでデータをテーブル表示する

Google Chartでは、データをテーブル表示することができます。

googleChart2

テーブルで表示するには、packagesにtableを設定します。そして、setOnLoadCallbackでデータとオプションを設定する関数(例:graphChart)を設定します。

関数では、データとオプションを設定して、google.visualization.Tableにテーブルを表示する場所(id=”drawChart”)を引数にして生成します。

最後に、生成したオブジェクトからdrawメソッドでテーブルチャーを表示させます。

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(graphChart);

function graphChart() {
	var data = google.visualization.arrayToDataTable([
		['都道府県', '人口'],
		['東京', 13159388],
		['大阪', 8865245],
		['神奈川', 9048331],
		['愛知', 7410719],
		['福岡', 5071968],
		['北海道', 5506419],
		['埼玉', 7194556]
	]);

	var option = {
		width: 300,
	};

	var graph = new google.visualization.Table(document.getElementById('drawChart'));
	graph.draw(data, option);
}
</script>
<div id="drawChart"></div>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です