Google Geochart를 브라우저에서 이미지 (JPEG, PNG 등) 또는 PDF로 변환하십시오.

Question

Google GeoCharts (https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview)를 사용하고 있습니다. 브라우저에서 색상으로 구분 된지도를 동적으로 생성 할 수 있습니다. geochart API는 javascript/svg ...를 사용하여지도를 그립니다. 내보낼 수있는 이미지 파일을 생성하기위한 조언이 있습니까? (pdf, 래스터 이미지 등)

google geocharts를 통해이 작업을 수행 할 수 있습니까? 그렇지 않은 경우 추천 할만한 다른 서비스가 있습니까?

* 이전에 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; 

참고 : 내가 원래 위의 사이트 (리카르도 GOVONI)의 저자에 의해 만들어진,이 코드를 작성하지 않았고, 사용자 Thomas가 주석 섹션에서 업데이트했습니다.

Answer 2

매우 훌륭합니다. Highcharts에서 이미지 변환기로 SVG를 활용하여이 작업을 수행합니다. 페이지에서 svg 코드를 찾고 하이 차트 내보내기 서버에 유형 매개 변수 (예 : 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/