web-dev-qa-db-fra.com

Est-il possible de sauvegarder un graphique Google en tant qu'image?

Je suis en train de faire une application dans laquelle je devrais enregistrer le graphique Google en tant qu'image. Tout ce que j'utilise, c'est Tomcat, les servlets et javascript. Existe-t-il un moyen de sauvegarder le graphique généré suivant en tant qu’image? (se référer au code à la fin du post). L'idée est que l'utilisateur verrait ce tableau et aurait ensuite la possibilité de le télécharger sur son profil facebook. Je ne sais pas si cela sera téléchargeable sur Facebook dans son format natif ou s'il sera nécessaire de l'enregistrer au format jpg.

<html>    
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addRows(4);
    data.setValue(0, 0, ''+2004);
    data.setValue(0, 1, 1000);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030.5);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, title: 'Company Performance',hAxis: {title: "X", titleTextStyle: {color: "green"}}});
  }

</script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>
javascriptimagesavecharts
13
Kashif

On dirait que cette fonctionnalité a été récemment1 ajouté comme:

chart.getImageURI()

Voir la documentation .

1Il semble avoir été ajouté dans la version du 29 janvier 2014.

12
mgilson

Exemple de solution de Riccardo Govoni, comme indiqué sur la page des problèmes de Google Maps. L'idée est de convertir l'élément SVG en élément Canvas.

Liens:

Tutoriel: http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html

Exemple de page: http://www.battlehorse.net/attach/topics/charts/google_charts_to_image.html

7
Kosio

C'est ce que je fais

http://danml.com/#/download.html

 download(chart.getImageURI(), 'fileName.png', "image/png");

si le script 3kb est trop, utilisez http://www.closure-compiler.appspot.com/home

4
Oshanz

Votre option la plus simple consiste à régénérer une version image statique du graphique à l'aide de API Google Chart

1
RSG

Utilisez la bibliothèque grChartImg. C'est une solution multi-navigateur de George Risvas. Prend en charge tous les navigateurs, y compris les anciennes versions de IE, et vous fournit de nombreuses procédures automatiques, telles que convertir un graphique en image, télécharger, afficher un graphique dans une boîte de dialogue, le télécharger sur un serveur, etc.

Pour plus d'informations, consultez www.chartstoimage .

J'espère vous aider.

1
john

Tout d'abord, téléchargez cette bibliothèque:

http://danml.com/download.html

et après que vous ayez juste à ajouter un écouteur d'événements à l'intérieur de votre graphique

function: 
 google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {

var chart = new google.visualization.ComboChart(document.getElementById('chart_tickets'));
    google.visualization.events.addListener(chart, 'ready', function () {

    $("#GraphDownloadTickets").click(function() {
         download(chart.getImageURI(), 'fileName.png', "image/png")

    });
}
0
Fahem Idir