Question

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

这可以通过谷歌地理广告来完成吗？如果没有，您可以推荐其他服务吗？

*我们之前使用的是GeoMaps，但分辨率不合适。

Answer 1

这可以通过执行this page上的步骤来完成。请注意，文章中的代码基于使用iframe的旧版Google展示，并且不会像发布的那样发挥作用。但是，您可以使用以下代码（在注释中找到）执行相同的操作：

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的评论部分进行了更新。

Answer 2

这很可能;我是通过从Highcharts利用SVG到图像转换器来做到这一点的。您只需在页面中找到svg代码并将其发送到highcharts导出服务器以及类型参数（例如image / jpeg），作为宽度，以及将其另存为的文件名。

唯一的缺点：IE不是渲染SVG，而是谷歌可视化的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/

在浏览器中将Google Geochart转换为图像（JPEG，PNG等）或PDF

2 个答案: