ブラウザでGoogle Geochartをイメージ（JPEG、PNGなど）またはPDFに変換する

Question

Google GeoCharts（https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview）を使用しています。ブラウザーで色分けされたマップを動的に生成します。 geochart APIはjavascript/svgを使用してマップを描画します...エクスポート可能なイメージファイルを生成するためのアドバイスはありますか？ （pdf、ラスターイメージなど）

これはgoogle geochartsで行うことができますか？そうでない場合は、お勧めできるサービスがありますか？

*以前はGeoMapsを使用していましたが、解像度が適切ではありませんでした。

Answer 1

これは、this pageの手順に従って行うことができます。この記事のコードは、iframeを使用したGoogle Visualizationの古いバージョンに基づいており、投稿されたものとしては機能しません。しかし、あなたが（コメントで見つかった）次のコードを使用して同じ操作を行うことができます。

var svg = $(chartContainer).find('svg').parent().html(); 
var doc = chartContainer.ownerDocument; 
var canvas = doc.createElement('canvas'); 
canvas.setAttribute('style', 'position: absolute; ' + ''); 
doc.body.appendChild(canvas); 
canvg(canvas, svg); 
var imgData = canvas.toDataURL("image/png"); 
canvas.parentNode.removeChild(canvas); 
return imgData; 

注：私はもともとは上記サイト（リッカルドGovoni）の著者によって作成された、このコードを作成していないとユーザーThomasによってコメントセクションで更新されました。

Answer 2

これは非常に可能です。私はHighchartsからのイメージコンバータにSVGを利用してこれを行います。ページ内でsvgコードを見つけて、ハイチャートのエクスポートサーバーにタイプパラメータ（image/jpegなど）、幅、ファイル名を保存するだけです。

欠点のみ：IEはSVGを表示していませんが、Googleの視覚化にはVMLを表示しています。そこにはまだ解決策はありませんが、HighchartsはIEとVMLからSVGへの変換にも問題があるようです。だからそこに運がない私は恐れている。

<form method="post" action="http://export.highcharts.com/" id="imageGetForm"> 
<input type="hidden" name="filename" value="savedFromGoogleVisualization" /> 
<input type="hidden" name="type" id="imageGetFormTYPE" value="" /> 
<input type="hidden" name="width" value="900" /> 
<input type="hidden" name="svg" value="" id="imageGetFormSVG" /> 
</form> 

と、次のスクリプトを実行します。ここで

var svg=document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode.innerHTML; 
$('#imageGetFormTYPE').val('image/jpeg');//e.g. image/jpeg application/pdf etc 
$('#imageGetFormSVG').val(svg); 
$('#imageGetForm').submit(); 

の作業例を：http://jsfiddle.net/P6XXM/