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="画像作成" />
スポンサーリンク

コメント