Chuyển đổi Google Geochart thành hình ảnh (JPEG, PNG, v.v.) hoặc PDF trong trình duyệt

Question

Tôi đang sử dụng Google GeoCharts (https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview) tự động tạo bản đồ được mã hóa màu trong trình duyệt. Bản đồ địa lý api vẽ các bản đồ bằng cách sử dụng javascript/svg ... bất kỳ lời khuyên nào để tạo tệp hình ảnh có thể xuất được? (pdf, hình ảnh raster, v.v ..)

Điều này có thể được thực hiện thông qua google geocharts không? Nếu không, bạn có thể giới thiệu một dịch vụ khác không?

* Trước đây chúng tôi đã sử dụng GeoMaps nhưng độ phân giải không phù hợp.

Answer 1

Điều này có thể được thực hiện bằng cách làm theo các bước trên this page. Lưu ý rằng mã trong bài viết dựa trên phiên bản Google Visualization cũ sử dụng iframe và sẽ không hoạt động như được đăng. Tuy nhiên, bạn có thể làm tương tự bằng cách sử dụng đoạn mã sau (tìm thấy trong các ý kiến):

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; 

Lưu ý: Tôi không tạo ra mã này, ban đầu nó được tạo ra bởi các tác giả của trang web trên (Riccardo GOVONI) và được cập nhật trong phần bình luận của người dùng Thomas.

Answer 2

Điều này rất tốt; Tôi làm điều này bằng cách khai thác SVG để chuyển đổi hình ảnh từ Highcharts. Bạn chỉ cần tìm mã svg trong trang và POST tới máy chủ xuất khẩu highcharts cùng với một tham số kiểu (ví dụ: hình ảnh/jpeg), dưới dạng chiều rộng và tên tệp để lưu nó thành.

Nhược điểm duy nhất: IE không hiển thị SVG nhưng VML cho hiển thị của Google. Chưa có giải pháp nào, nhưng có vẻ Highcharts cũng gặp khó khăn với IE và VML để chuyển đổi SVG. Vì vậy, không có may mắn có tôi sợ.

<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> 

và thực thi kịch bản sau đây:

dụ

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(); 

Làm việc ở đây: http://jsfiddle.net/P6XXM/