在浏览器中将Google地理图表转换为图像（JPEG、PNG等）或PDF

Question

我正在使用Google GeoCharts（https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview）在浏览器中动态生成色彩编码地图。 geochart api使用javascript / svg绘制地图……有没有生成可导出的图像文件的建议？ （pdf，光栅图像等）

这是否可以通过google geocharts完成？如果不行，您能推荐其他服务吗？

*我们以前使用过GeoMaps，但分辨率不太合适。

- wearedag

Answer 1

您可以按照此页面上的步骤完成此操作。请注意，文章中的代码基于使用iframes的旧版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; 

注意：这段代码并非由我创建，而是由上述网站的作者Riccardo Govoni所创建，并在评论区被用户Thomas更新。

- jmac

Answer 2

这是很有可能的；我通过利用Highcharts的SVG转图像转换器来实现这一点。您只需在页面中找到svg代码，将其POST到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/

- Jeroen

---

我能否以你在示例中提到的方式下载Google图表表格？ - jane

不要这样做。为什么要将表格下载为图像？相反，运行一个脚本将表格导出为CSV或类似格式会更容易。 - Jeroen