將Google Geochart轉換爲圖像（JPEG，PNG等）或瀏覽器中的PDF

我使用Google GeoCharts（https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview）在瀏覽器中動態生成顏色編碼的地圖。 geochart api使用javascript/svg繪製地圖...有關生成可導出圖像文件的任何建議？（pdf，光柵圖像等）將Google Geochart轉換爲圖像（JPEG，PNG等）或瀏覽器中的PDF

這可以通過谷歌geocharts完成嗎？如果沒有，是否還有其他服務可以推薦？

*我們以前使用過GeoMaps，但分辨率並不合適。

來源

2012-07-18 wearedag

這可以按照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的評論部分更新。

來源

2013-02-22 06:50:59 jmac

這是非常好的可能;我通過利用Highcharts的SVG圖像轉換器來實現這一點。您只需在頁面中找到svg代碼，然後將其導出到highcharts導出服務器以及類型參數（例如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/

來源

2013-08-26 09:00:48 Jeroen

我可以下載谷歌圖表表以同樣的方式，你在例子中提到？ – jane 2015-05-26 11:24:25

不一樣。你爲什麼要下載表格作爲圖像？相反，運行腳本將表導出到csv或類似的東西會容易得多。 – Jeroen 2015-05-27 20:07:17

將Google Geochart轉換爲圖像（JPEG，PNG等）或瀏覽器中的PDF

回答

相關問題