Google Chartでイメージ画像を表示する方法

スポンサードリンク

Google Chartで作成したチャートを画像(PNG)として表示することができます。画像を表示するときに使うのが、getImageURIメソッドです。

下のコードでは、通常のチャート表示の他にボタンをクリックするとチャート画像(PNG)が表示されます。

google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
var chart;
$(function() {
	$('#buttonImg').click(function() {
		$('#chartPNG').html('<img src="' + chart.getImageURI() + '">');
	});
});

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

	chart = new google.visualization.PieChart(document.getElementById('piechart'));
	chart.draw(data, options);
}
<div id="piechart"></div>
<div id="chartPNG"></div>
<input type="button" id="buttonImg" value="画像作成" />

コメントを残す

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