¿Puede Google Visualization: salida de gráfico circular a una imagen PNG?

Google Visualization API puede dibujar el gráfico circular en el sitio web con javascript. ¿Se puede generar el gráfico como un archivo de imagen PNG?¿Puede Google Visualization: salida de gráfico circular a una imagen PNG?

Gracias.

Fuente

2011-07-12 Tatming

Tengo el mismo problema, solo el antiguo Gráfico de imagen ** no ** es adecuado para mi necesidad. – msanford

Este tutorial muestra cómo transformar los gráficos generados por los gráficos de Google en una imagen, espero que ayude: http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html –

Claro, sólo tiene que utilizar la imagen estática Google Chart API

Al menos, que pueda hasta 20 Apr 2015 :(

Fuente

2011-07-12 06:56:36

Gracias. Encontré el gráfico circular de imagen que es adecuado en mi caso. – Tatming

El nuevo JSAPI es muy atractivo, pero los códigos HTML están en etiquetas . ¿Hay alguna manera de que podamos convertir esa salida genial (https://google-developers.appspot.com/chart/interactive/docs/quick_start) en una imagen? –

Lamento decirlo, pero la antigua API de imagen ahora está en desuso - ttl = 2015: https://developers.google.com/chart/terms – zeroasterisk

me encontré con esto, pero aún no han probado: https://gist.github.com/battlehorse/1333906

parece que se usa lienzo a cliente convertir los datos en SVG/PNG, que se imprimirá.

Fuente

2013-03-13 15:29:52 zeroasterisk

Esto no funciona desde la actualización en la que eliminaron iframes hace más de medio año. Ver comentarios aquí para la solución. http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html – Doomsknight

Sí. Esto ya no se admite de forma nativa en la API de visualización de Google, pero solo requiere algunas líneas de JavaScript, a continuación.

La solución, originalmente descrita por Riccardo Govoni en el maravilloso Battlehorse tutorial, convierte SVG en Canvas y luego en PNG, que luego se puede mostrar o guardar.

El código tutorial ya no funciona, pero agregó dos correcciones a la misma:

Establecer la variable chartArea trabajar con Google versión de la API de visualización 1,32 (septiembre 24 de, 2012) y más tarde (source)
uso canvg.js R157 como una solución para un regression identificado por nverba

<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="https://canvg.googlecode.com/svn-history/r157/trunk/canvg.js"></script> 
<script> 
    function getImgData(chartContainer) { 
    var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode; 
    var svg = chartArea.innerHTML; 
    var doc = chartContainer.ownerDocument; 
    var canvas = doc.createElement('canvas'); 
    canvas.setAttribute('width', chartArea.offsetWidth); 
    canvas.setAttribute('height', chartArea.offsetHeight); 

    canvas.setAttribute(
     'style', 
     'position: absolute; ' + 
     'top: ' + (-chartArea.offsetHeight * 2) + 'px;' + 
     'left: ' + (-chartArea.offsetWidth * 2) + 'px;'); 
    doc.body.appendChild(canvas); 
    canvg(canvas, svg); 
    var imgData = canvas.toDataURL("image/png"); 
    canvas.parentNode.removeChild(canvas); 
    return imgData; 
    } 

    function saveAsImg(chartContainer) { 
    var imgData = getImgData(chartContainer); 

    // Replacing the mime-type will force the browser to trigger a download 
    // rather than displaying the image in the browser window. 
    window.location = imgData.replace("image/png", "image/octet-stream"); 
    } 

    function toImg(chartContainer, imgContainer) { 
    var doc = chartContainer.ownerDocument; 
    var img = doc.createElement('img'); 
    img.src = getImgData(chartContainer); 

    while (imgContainer.firstChild) { 
     imgContainer.removeChild(imgContainer.firstChild); 
    } 
    imgContainer.appendChild(img); 
    } 
</script> 

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    // Pie chart 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Task'); 
    data.addColumn('number', 'Hours per Day'); 
    data.addRows(5); 
    data.setValue(0, 0, 'Work'); 
    data.setValue(0, 1, 11); 
    data.setValue(1, 0, 'Eat'); 
    data.setValue(1, 1, 2); 
    data.setValue(2, 0, 'Commute'); 
    data.setValue(2, 1, 2); 
    data.setValue(3, 0, 'Watch TV'); 
    data.setValue(3, 1, 2); 
    data.setValue(4, 0, 'Sleep'); 
    data.setValue(4, 1, 7); 

    var chart = new google.visualization.PieChart(document.getElementById('google_visualization_div')); 
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'}); 
    } 
</script> 
</head> 
<body> 
<div id="google_visualization_div"></div> 

<button onclick="saveAsImg(document.getElementById('google_visualization_div'));">Save as PNG Image</button> 
<button onclick="toImg(document.getElementById('google_visualization_div'), document.getElementById('img_div'));">Convert to image</button> 
<hr> 
<div id="img_div"> 
    Image will be placed here 
</div> 
</body> 
</html>

Fuente

2013-04-22 01:10:27

@philipp .. gran trabajo ... –

en IE8 estoy enfrentando problemas en chartContainer.getElementsByTagName ('svg') [0] .parentNode; Cómo puedo resolverlo – Hariprasath

¿Puede Google Visualization: salida de gráfico circular a una imagen PNG?

Respuesta

Cuestiones relacionadas