javascript - example - highcharts demo

¿Cómo guardar una imagen del gráfico en el servidor con Highcharts?

Question

Con Highcharts, tiene un botón incorporado para descargar el gráfico actual (ejemplo: http://www.highcharts.com/demo/ , este botón: ) Puede guardarlo como PNG, JPEG, PDF o SVG.

Lo que me gustaría hacer es crear un enlace que guarde la imagen en el servidor, en lugar de descargarla . ¿Cómo podría hacer eso?

Supongo que tengo que modificar la función exportChart en el archivo exporting.src.js. Se ve así (pero no sé lo suficiente de JavaScript para hacer eso):

exportChart: function (options, chartOptions) {
        var form,
            chart = this,
            svg = chart.getSVG(chartOptions);

        // merge the options
        options = merge(chart.options.exporting, options);

        // create the form
        form = createElement(''form'', {
            method: ''post'',
            action: options.url
        }, {
            display: NONE
        }, doc.body);

        // add the values
        each([''filename'', ''type'', ''width'', ''svg''], function (name) {
            createElement(''input'', {
                type: HIDDEN,
                name: name,
                value: {
                    filename: options.filename || ''chart'',
                    type: options.type,
                    width: options.width,
                    svg: svg
                }[name]
            }, null, form);
        });

        // submit
        form.submit();

        // clean up
        discardElement(form);
    },

Answer 1

Simplemente implemento esto usando el método de Nobita. Estaba creando una encuesta que mostraba los resultados del usuario en un gráfico, subí la imagen a mi servidor y luego envié un correo electrónico con la imagen que contenía. Aquí hay algunas cosas para tener en cuenta.

Tuve que hacer algunas actualizaciones al archivo highcharts / exporting-server / index.php que son las siguientes:

Cambié el directorio de "temp" a algo más y solo tengo en cuenta que está en 4 ubicaciones diferentes.

Tuve que cambiar shell_exec () agregando "-XX: MaxHeapSize = 256m" porque me estaba dando un error:

$output = shell_exec("java -XX:MaxHeapSize=256m -jar ". BATIK_PATH ." $typeString -d $outfile $width /mypathhere/results/$tempName.svg");

Si desea que descargue esa imagen, puede dejar lo siguiente solo:

header("Content-Disposition: attachment; filename=$filename.$ext");
header("Content-Type: $type");
echo file_get_contents($outfile);

Pero cambié esto porque quería devolver el camino a la imagen, así que eliminé el anterior y lo reemplazo con la ruta de la imagen ( tenga en cuenta que solo estoy usando el nombre temporal ):

echo "/mypathhere/results/$tempName.$ext";

Además, este archivo está eliminando el archivo svg y también el nuevo archivo que ha creado. Debe eliminar el código que elimina el archivo:

unlink($outfile);

Y también puede eliminar la línea anterior si desea mantener el archivo svg.

Asegúrese de incluir highcharts / js / modules / exporting.js

Luego, en su JS puede hacer algo como lo siguiente:

var chart = new Highcharts.Chart();    
var imageURL = '''';
var svg = chart.getSVG();
var dataString = ''type=image/jpeg&filename=results&width=500&svg=''+svg;
$.ajax({
    type: ''POST'',
    data: dataString,
    url: ''/src/js/highcharts/exporting-server/'',
    async: false,
    success: function(data){
        imageURL = data;
    }
});

La URL que está publicando es la nueva versión del /exporting-server/index.php. Entonces, puedes usar el imageURL como quieras.

Answer 2

Se podría hacer realmente fácil con PhantomJS . Puede renderizar el gráfico de Highchart y guardarlo en SVG, PNG, JPEG o PDF. El siguiente ejemplo muestra un diagrama de demostración de Highcharts en SVG y PDF al mismo tiempo:

var system = require(''system'');
var page = require(''webpage'').create();
var fs = require(''fs'');

// load JS libraries
page.injectJs("js/jquery.min.js");
page.injectJs("js/highcharts/highcharts.js");
page.injectJs("js/highcharts/exporting.js");

// chart demo
var args = {
    width: 600,
    height: 500
};

var svg = page.evaluate(function(opt){
    $(''body'').prepend(''<div id="container"></div>'');

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: ''container'',
            width: opt.width,
            height: opt.height
        },
        exporting: {
            enabled: false
        },
        title: {
            text: ''Combination chart''
        },
        xAxis: {
            categories: [''Apples'', ''Oranges'', ''Pears'', ''Bananas'', ''Plums'']
        },
        yAxis: {
            title: {
                text: ''Y-values''
            }
        },
        labels: {
            items: [{
                html: ''Total fruit consumption'',
                style: {
                    left: ''40px'',
                    top: ''8px'',
                    color: ''black''
                }
            }]
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            },
            series: {
                enableMouseTracking: false, 
                shadow: false, 
                animation: false
            }
        },
        series: [{
            type: ''column'',
            name: ''Andrii'',
            data: [3, 2, 1, 3, 4]
        }, {
            type: ''column'',
            name: ''Fabian'',
            data: [2, 3, 5, 7, 6]
        }, {
            type: ''column'',
            name: ''Joan'',
            data: [4, 3, 3, 9, 0]
        }, {
            type: ''spline'',
            name: ''Average'',
            data: [3, 2.67, 3, 6.33, 3.33],
            marker: {
                lineWidth: 2,
                lineColor: ''white''
            }
        }, {
            type: ''pie'',
            name: ''Total consumption'',
            data: [{
                name: ''Andrii'',
                y: 13,
                color: ''#4572A7''
            }, {
                name: ''Fabian'',
                y: 23,
                color: ''#AA4643''
            }, {
                name: ''Joan'',
                y: 19,
                color: ''#89A54E''
            }],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });

    return chart.getSVG();
},  args);

// Saving SVG to a file
fs.write("demo.svg", svg);
// Saving diagram as PDF
page.render(''demo.pdf'');

phantom.exit();

Si guarda el código como demo.js , simplemente ejecute bin/phantomjs demo.js para generar demo.svg y demo.pdf

Answer 3

Puedes intentar esto

 var chart = $(''#yourchart'').highcharts();
    svg = chart.getSVG();   
    var base_image = new Image();
    svg = "data:image/svg+xml,"+svg;
    base_image.src = svg;
    $(''#mock'').attr(''src'', svg);

Tome html de Mock y envíe a DB o guarde solo el código binario.

Guardar Highchart como imagen binaria

Answer 4

No he hecho eso antes, pero creo que quieres jugar con el archivo index.php ubicado en la carpeta exporting-server . De forma predeterminada, Highcharts proporciona (de forma gratuita) un servicio web, pero puede modificarlo y crear su propio servicio web para exportar, o hacer lo que quiera con el gráfico. Mira estas instrucciones que se pueden encontrar aquí Módulo de exportación :

"Si desea configurar este servicio web en su propio servidor, el archivo index.php que maneja el POST se incluye en el paquete de descarga dentro del directorio / exporting-server.

1. Asegúrese de que PHP y Java estén instalados en su servidor.
2. Suba el archivo index.php del directorio / exporting-server en el paquete de descarga a su servidor.
3. En su programa FTP, cree un directorio llamado temp en el mismo directorio que index.php y chmod este nuevo directorio en 777 (solo servidores Linux / Unix).
4. Descarga Batik desde http://xmlgraphics.apache.org/batik/#download . Encuentre la distribución binaria para su versión de jre
5. Suba batik-rasterizer.jar y todo el directorio lib a una ubicación en su servidor web. En las opciones en la parte superior del archivo index.php, establezca la ruta a batik-rasterier.jar.
6. En las opciones de gráfico, establezca la opción exporting.url para que coincida con la ubicación de su archivo PHP. "