Comment graphique Exporter vers un fichier Excel JavaScript (Highcharts)

Question

Je dois exporter un tableau Javascript (de Highcharts) dans un fichier Excel; le tableau a été rendu dans une div, mais Excel ne rend pas le contenu html + css javascript génère, rendu seul le texte sans style.

Une solution serait de convertir celui-ci où le tableau a été rendu dans une image (jpeg), mais je n'ai pas de succès ...

Merci!

Answer 1

Highcharts supporte déjà l'image fonctionnalité d'exportation via le module d'exportation qui est emballé avec elle. Exportation Après l'obtenir, vous devriez être en mesure de modifier le script pour enregistrer le l'image de quelque façon que vous avez besoin. Il est certainement pas une tâche débutant et il faudra beaucoup de bricoler.

Si c'était moi je modifier le code qui répond au bouton d'exportation afin que je puisse l'activer avec JavaScript et aussi transmettre des informations afin que le fichier PHP sur le back-end pourrait enregistrer l'image de la manière que vous voulez plutôt que de retourner au client.

Answer 2

Cela peut être un peu en retard, mais je suis tombé sur ce via Google il pourrait aider quelqu'un. L'image de Highchart est au format SVG: http://en.wikipedia.org/wiki/Svg , vous devez convertir en une image au format bitmap. Vous devez changer les Highcharts exportateurs URL d'options pour votre propre URL:

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

Dans votre script d'exportation que vous devez convertir l'image SVG à une image bitmap (je PHP & imagick) puis exporter à tout ce qui convient à vos besoins, enregistrez l'image bitmap sur le serveur, envoyer par e-mail, etc.,

Answer 3

Après quelques recherches, j'ai trouvé cette récente réponse dans leurs forums , avec un jsFiddle pour bricoler.

Il décrit comment exporter un fichier CSV à l'aide d'un script sur votre serveur, qui de l'expérience passée, est la seule façon cela peut se faire parce que le graphique HighChart lui-même ne contient pas d'informations assez pour produire une feuille de calcul utilisable. Nous faisons déjà avec une bibliothèque dressant une carte différente, et l'utilisation PHPExcel pour créer réellement la feuille de calcul.

Answer 4

Si vous êtes prêt à essayer un complément, il existe un moyen d'utiliser Javascript, HTML et CSS dans Excel. Il est appelé FunFun et il accueille un éditeur en ligne avec une feuille de calcul intégré de sorte que la transition n'est pas difficile entre le site Web à Excel.

Voici un tableau que j'ai fait avec Highcharts:

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

Dans cet exemple, je pris le tableau d'un Highchart démo , et a remplacé les données avec mien. Je stocke mes données dans la feuille de calcul intégré, et grâce à un fichier JSON je peux l'utiliser dans mon code javascript.

Voilà comment je reçois mes données de la feuille de calcul avec le fichier JSON:

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

Je stocke dans mes script.js avec le format que je puisse charger directement dans Highcharts (pour les numéros que vous devez convertir vos données en flotteurs ou 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]
    }
  );

Après avoir choisi toutes les options que vous êtes pour votre thème natal vous pouvez ajouter vos données:

series: [{
        data: data
    }]

Une fois que vous êtes satisfait de votre thème natal vous pouvez charger directement dans Excel en collant l'URL dans le FunFun add-in . Voici comment il ressemble à mon exemple:

Bien sûr, vous pouvez utiliser une autre bibliothèque que Highcharts, il y a beaucoup de puissantes bibliothèques pour la visualisation des données comme charts.js et D3.js.

Je sais que c'est un ancien poste, mais j'espère que cela aide les gens avec le même problème.

Divulgation:. Je suis un développeur de FunFun

Answer 5

Je sais qu'il est trop tard, mais j'ai le même problème et ce jsFiddle m'a aidé à créer Excel de highchart. L'option Télécharger CSV ajouté au menu d'exportation fonctionne très bien. Voici le code:

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