web-dev-qa-db-fra.com

Rendre le canevas Highcharts au format PNG sur la page

J'utilise la bibliothèque HighCharts pour générer des graphiques dynamiques. Cependant, je voudrais rendre l'élément de canevas HighCharts sous forme d'image PNG, de sorte que l'utilisateur puisse copier et coller le graphique dans un e-mail, etc. sans avoir à utiliser la fonction d'exportation.

Plus précisément, j'essaie de créer un modèle d'e-mail HTML qui inclut le graphique et je veux que l'utilisateur puisse tout sélectionner> copier/coller dans son client de messagerie au lieu de copier/coller, d'exporter l'image, puis de trouver un moyen de insérez-le dans l'e-mail.

J'ai trouvé ceci: Capture HTML Canvas en gif/jpg/png/pdf? , mais le code ne semble pas restituer une image au document.

canvaspngrenderhighcharts
22
Ben Wilson

Voici une solution côté serveur basée sur PhantomJS. Vous pouvez utiliser JSONP pour effectuer un appel interdomaine à image.vida.io.

http://image.vida.io/

Votre graphique/visualisation doit être accessible de l'extérieur. Vous pouvez transmettre des informations d'identification à l'URL.

http://image.vida.io/api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas

Ensuite, vous pouvez afficher l'image avec la balise img:

<img src="data:image/png;base64, [base64 data]"/>

Cela fonctionne à travers le navigateur.

6
Phuoc Do

Voici un hack si vous avez à cœur d'utiliser HighCharts. Il utilise canvg pour analyser le SVG dans un canevas, puis convertit le canevas en PNG.

chart = new Highcharts.Chart({
    
    chart: {
        renderTo: 'container'
    },
    
    title: {
        text: ''
    },
    
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }],
    
    navigation: {
        buttonOptions: {
            align: 'center'
        }
    }
});

canvg(document.getElementById('canvas'), chart.getSVG())
    
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");

document.write('<img src="'+img+'"/>');
27
Mark

Je sais que c'est maintenant une vieille question, mais depuis qu'elle est apparue n ° 1 pour moi dans un résultat de recherche Google, je pense qu'il vaut la peine de mentionner que Highcharts maintenant prend en charge nativement un script de génération d'image côté serveur et il fonctionne très bien.

11
jkraybill

Avec les informations de " Render charts on the server " (from jkraybills answer ), j'ai créé cet exemple minimal en utilisant un Ajax pour obtenir une image d'un graphique qui a n'a pas été rendu et l'affiche dans une balise img-.

HTML:

<img id="chart" style="width: 600px;" />

Javascript:

// Regular chart options
var options = {
    title: {
        text: 'My chart'
    }
    ...
}

//URL to Highcharts export server
var exportUrl = 'http://export.highcharts.com/';

//POST parameter for Highcharts export server
var object = {
    options: JSON.stringify(options),
    type: 'image/png',
    async: true
};

//Ajax request
$.ajax({
    type: 'post',
    url: exportUrl,
    data: object,
    success: function (data) {
        // Update "src" attribute with received image URL
        $('#chart').attr('src', exportUrl + data);
    }
});

Comme dans cette démonstration JSFiddle .

Le reste du paramètre POST (width, callback...) est dans la documentation .

8
Halvor Holsten Strand