Come Grafico Esporta JavaScript per file di Excel (Highcharts)

Question

Devo Esportare un grafico Javascript (Highcharts) in un file excel; la tabella è stata pronunciata in un div, ma Excel non rende i contenuti html + css javascript genera, rende solo il testo senza stile.

Una soluzione sarebbe convertire questo in cui il grafico è stato reso in un'immagine (jpeg) ma non ho successo ...

Grazie!

Answer 1

Highcharts supporta già la funzionalità di esportazione immagine tramite il modulo esportazione che viene fornito con esso. Esportazione Dopo aver ottenuto che si dovrebbe essere in grado di modificare lo script per salvare il immagine in qualsiasi modo si ha bisogno. Non è certamente un compito principianti e richiederà un sacco di armeggiare.

Se fossi stato io sarebbe modificare il codice che risponde al pulsante Esporta in modo che possa attivare con Javascript e anche passare informazioni in modo che il file PHP sul back-end potrebbe salvare l'immagine nel modo che vuoi invece di tornare al client.

Answer 2

Questo potrebbe essere un po 'tardi, ma mi sono imbattuto in questo tramite Google quindi potrebbe aiutare qualcuno. l'immagine di Highchart è in formato SVG: http://en.wikipedia.org/wiki/Svg , è necessario convertire che a un'immagine formato bitmap. Devi cambiare le Highcharts esportatori opzioni URL per il proprio URL:

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

Nel vostro script di esportazione è necessario convertire l'immagine in formato SVG in un'immagine bitmap (io ho usato PHP & imagick) quindi esportare a tutto ciò che si adatta alle vostre esigenze, l'immagine bitmap Salva al server, inviare via e-mail, ecc,

Answer 3

Dopo alcune ricerche, ho trovato questa recente risposta nei loro forum , con un jsfiddle per armeggiare con.

E 'descritto come esportare un file CSV utilizzando uno script sul server, che dalle esperienze passate, è l'unico modo questo può avere fatto perché il grafico HighChart in sé non contiene quasi abbastanza informazioni per produrre un foglio di calcolo utilizzabile. Abbiamo già facciamo con una libreria diversa creazione di grafici, e l'uso phpExcel effettivamente creare il foglio di calcolo.

Answer 4

Se si è disposti a provare un componente aggiuntivo, c'è un modo di usare Javascript, HTML e CSS in Excel. Si chiama funfun e ospita un editor online di un foglio di lavoro incorporato in modo che la transizione non è difficile tra il sito web in Excel.

Ecco una tabella che ho fatto con Highcharts:

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

In questo esempio ho preso il grafico da un Highchart demo , e sostituito i dati con il mio. Posso conservare i miei dati nel foglio di calcolo incorporato, e grazie a un file JSON posso usarlo nel mio codice javascript.

E 'così che i miei dati dal foglio di calcolo con il file JSON:

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

devo conservare nei miei script.js con il formato giusto in modo da poter caricare direttamente in Highcharts (per i numeri è necessario convertire i dati in galleggianti 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]
    }
  );

Dopo aver scelto tutti di sei opzioni per il grafico è possibile aggiungere i dati:

series: [{
        data: data
    }]

Una volta che si è soddisfatti con il grafico è possibile caricare direttamente in Excel incollando l'URL nel funfun add-in . Ecco come appare come con il mio esempio:

Naturalmente è possibile utilizzare un'altra libreria di Highcharts, ci sono un sacco di potenti librerie per la visualizzazione dei dati come charts.js e D3.js.

So che questo è un vecchio post, ma spero che aiuta le persone con lo stesso problema.

Disclosure:. Sono uno sviluppatore di funfun

Answer 5

Lo so che è troppo tardi, ma ho lo stesso problema e questo jsfiddle mi ha aiutato a creare excel da highchart. Il Scarica CSV aggiunto al menu di esportazione funziona bene. Ecco il codice:

/**
 * 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());
});