Cómo exportar el cuadro JavaScript al archivo de Excel (HighCharts)

Question

Tengo que exportar una tabla de JavaScript (HighCharts) en un archivo de Excel; El cuadro se renderizó en un DIV, pero el Excel no representa el contenido HTML+CSS que genera JavaScript, presenta solo el texto sin estilo.

Una solución se convertiría en esto donde el gráfico se convirtió en una imagen (JPEG) pero no tengo éxito ...

Gracias !

Answer 1

HighCharts ya admite la funcionalidad de exportación de imágenes a través del módulo de exportación que está empaquetado con él. Exportador Después de obtenerlo, debería poder modificar el script para guardar la imagen de cualquier manera que necesite. Ciertamente no es una tarea para principiantes y requerirá muchos rayos.

Si fuera yo, modificaría el código que responde al botón Exportar para poder activarlo con JavaScript y también pasar por información para que el archivo PHP en el back-end pueda guardar la imagen de la manera que desee en lugar de devolver es al cliente.

Answer 2

Esto podría ser un poco tarde, pero me topé con esto a través de Google, por lo que podría ayudar a alguien. La imagen de HighChart está en formato SVG: http://en.wikipedia.org/wiki/svg , debe convertirlo en una imagen de formato de mapa de bits. Debe cambiar la URL de opciones de exportación HighCharts a su propia URL:

exporting : {
  url: 'http://mydomain.com/export.php'
}

En su script de exportación, debe convertir la imagen SVG en una imagen de mapa de bits (utilicé php e imagick) y luego exportar a las necesidades, guarde la imagen de mapa de bits al servidor, envíe por correo electrónico, etc., etc.

Answer 3

Después de una búsqueda, encontré esto reciente Respuesta en sus foros, con un jsfiddle a jugar con.

Describe cómo exportar un CSV usando un script en su servidor, que por experiencia pasada, es la única forma en que esto puede hacerse porque el gráfico HighChart en sí no contiene suficiente información para producir una hoja de cálculo utilizable. Ya lo hacemos con una biblioteca de gráficos diferente y usamos phpexcel para crear realmente la hoja de cálculo.

Answer 4

Si está dispuesto a probar un complemento, hay una manera de usar JavaScript, HTML y CSS en Excel. Se llama Funfun y aloja un editor en línea con una hoja de cálculo integrada para que la transición no sea difícil entre el sitio web de Excel.

Aquí hay una tabla que hice con HighCharts:

https://www.funfun.io/1/#/edit/5a61c190404f66229bda3f0f

En este ejemplo tomé la tabla de un Demostración de highchart, y reemplazó los datos con los míos. Alto mis datos en la hoja de cálculo integrada, y gracias a un archivo JSON puedo usarlos en mi código JavaScript.

Así es como obtengo mis datos de la hoja de cálculo con el archivo JSON:

{
    "data": "=A1:E16"
}

Lo almaceno en mi script.js con el formato correcto para poder cargarlo directamente en Highcharts (para números debe convertir sus datos en flotadores o int):

var data = [];

for (var i = 1; i < $internal.data.length; i++)
  data.push(
    {
      x: parseFloat($internal.data[i][2]),
      y: parseFloat($internal.data[i][3]),
      z: parseFloat($internal.data[i][4]),
      name: $internal.data[i][1],
      country: $internal.data[i][0]
    }
  );

Después de haber elegido todas sus opciones para su gráfico, puede agregar sus datos:

series: [{
        data: data
    }]

Una vez que esté satisfecho con su gráfico, puede cargarlo directamente en Excel pegando la URL en el Funfun Addent. Así es como se ve con mi ejemplo:

Por supuesto, puede usar otra biblioteca que HighCharts, hay muchas bibliotecas poderosas para la visualización de datos como gráficos.js y d3.js.

Sé que esta es una publicación antigua, pero espero que ayude a las personas con el mismo problema.

Divulgación: soy un desarrollador de Funfun.

Answer 5

Sé que es demasiado tarde pero tengo el mismo problema y esto jsfiddle Me ayudó a crear Excel de HighChart. los Descargar CSV La opción agregada para exportar el menú funciona bien. Aquí está el código:

/**
 * A small plugin for getting the CSV of a categorized chart
 */
(function (Highcharts) {

    // Options
    var itemDelimiter = ',',  // use ';' for direct import to Excel
        lineDelimiter = '\n';

    var each = Highcharts.each;
    Highcharts.Chart.prototype.getCSV = function () {
        var xAxis = this.xAxis[0],
            columns = [],
            line,
            csv = "", 
            row,
            col;

        if (xAxis.categories) {
            columns.push(xAxis.categories);
            columns[0].unshift("");
        }
        each (this.series, function (series) {
            columns.push(series.yData);
            columns[columns.length - 1].unshift(series.name);
        });

        // Transform the columns to CSV
        for (row = 0; row < columns[0].length; row++) {
            line = [];
            for (col = 0; col < columns.length; col++) {
                line.push(columns[col][row]);
            }
            csv += line.join(itemDelimiter) + lineDelimiter;
        }
        return csv;
    };    
}(Highcharts));

// Now we want to add "Download CSV" to the exporting menu. We post the CSV
// to a simple PHP script that returns it with a content-type header as a 
// downloadable file.
// The source code for the PHP script can be viewed at 
// https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php

Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
    text: 'Download CSV',
    onclick: function () {
        Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
            csv: this.getCSV()
        });
    }
});



var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    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]
    }]

});

$('#getcsv').click(function () {
    alert(chart.getCSV());
});