ब्राउज़र में Google Geochart को छवि (जेपीईजी, पीएनजी, आदि) या पीडीएफ में कनवर्ट करें

Question

मैं Google GeoCharts (https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview) का उपयोग कर रहा हूं। ब्राउज़र में रंग-कोडित मानचित्र गतिशील रूप से उत्पन्न करने के लिए। Geochart api जावास्क्रिप्ट/svg का उपयोग कर नक्शे खींचता है ... एक निर्यात योग्य छवि फ़ाइल उत्पन्न करने के लिए कोई सलाह? (पीडीएफ, रास्टर छवि, आदि)

क्या यह Google geocharts के माध्यम से किया जा सकता है? यदि नहीं, तो क्या कोई और सेवा है जिसे आप अनुशंसा कर सकते हैं?

* हम पहले जियोमैप्स का उपयोग कर रहे थे लेकिन संकल्प उपयुक्त नहीं था।

Answer 1

यह this page पर दिए गए चरणों का पालन करके किया जा सकता है। ध्यान दें कि आलेख में कोड Google विज़ुअलाइज़ेशन के पुराने संस्करण पर आधारित है जो iframes का उपयोग करता है, और पोस्ट के रूप में काम नहीं करेगा। हालांकि, अगर आप निम्नलिखित कोड (टिप्पणी में पाया जाता है) का उपयोग कर एक ही कर सकते हैं:

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) के लेखक द्वारा बनाया गया था और उपयोगकर्ता थॉमस द्वारा टिप्पणी अनुभाग में अद्यतन किया गया।

Answer 2

यह बहुत अच्छा है; मैं हाइचार्ट्स से छवि कनवर्टर के लिए एसवीजी का शोषण करके ऐसा करता हूं। आपको बस पृष्ठ में एसवीजी कोड मिलता है और पोस्ट करता है कि उच्च प्रकार के सर्वर को एक प्रकार के पैरामीटर (जैसे छवि/जेपीईजी) के साथ निर्यात करने के लिए चौड़ाई के रूप में, और फ़ाइल नाम को इसे सहेजने के लिए।

केवल नकारात्मक: आईई एसवीजी प्रतिपादन नहीं कर रहा है लेकिन Google विज़ुअलाइजेशन के लिए वीएमएल। अभी तक कोई समाधान नहीं है, लेकिन ऐसा लगता है कि हाईचार्ट्स को आईवी और वीएमएल के साथ एसवीजी रूपांतरणों में भी कठिनाइयां हैं। तो कोई भाग्य नहीं है मुझे डर है।

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