Comment Exporter JavaScript Tableau de fichier Excel (HighCharts)

J'ai pour Exporter un Javascript graphique (HighCharts) dans un fichier excel; le dossier était rendu dans une div, mais excel ne rend pas le html+css contenu javascript génère, rendre uniquement le texte sans style.

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

Merci !

OriginalL'auteur Rafael Ranzolin | 2011-09-06

  1. 2

    HighCharts prend déjà en charge l'image de l'exportation des fonctionnalités en passant par l'Exportation de Module qui est emballé avec elle. L'exportation Après, vous devriez être en mesure de modifier le script pour enregistrer l'image dont vous avez besoin. Ce n'est certainement pas un débutant tâche, qui aura besoin de beaucoup de bricolage.

    Si c'était moi, je voudrais modifier le code qui répond le bouton exporter pour que je puisse l'activer avec JavaScript et aussi de transmettre de l'information, de sorte que le fichier PHP sur le back-end pourrait enregistrer l'image dans la manière que vous voulez plutôt que de le retourner au client.

    Eh bien, j'ai essayé de modifier le highcharts exporter un fichier pour l'afficher où highcarts génère le lien de l'image pour la télécharger, mais je n'ai pas de succès..
    Salut Rafael j'ai besoin de faire la même chose que vous. Avez-vous trouvé une solution? S'il vous plaît partager. Merci

    OriginalL'auteur Gunnar Hoffman

  2. 1

    Cela pourrait être un peu en retard, mais je suis tombé sur cette via Google donc ça peut aider quelqu'un.
    Highchart de l'image est au format SVG: http://en.wikipedia.org/wiki/Svg , vous avez besoin de les convertir à un format bitmap image.
    Vous devez changer le Highcharts des options d'exportation de l'URL de votre propre URL:

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

    Dans votre script d'exportation, vous devez convertir le SVG image à une image bitmap (j'ai utilisé PHP & imagick) puis à l'exportation pour ce qui convient à vos besoins, enregistrer l'image bitmap pour le serveur, envoyer par e-mail, etc. ,

    OriginalL'auteur The Coder

  3. 1

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

    Il explique comment exporter un fichier CSV à l'aide d'un script sur votre serveur, qui, à partir de l'expérience du passé, est la seule manière de la faire, parce que le HighChart graphe ne contient pas assez d'information pour produire une feuille de calcul utilisable. Nous le faisons déjà avec une autre cartographie de la bibliothèque, et l'utilisation phpExcel pour créer la feuille de calcul.

    OriginalL'auteur GDP

  4. 1

    Si vous êtes prêt à essayer un complément, il existe un moyen de l'utilisation de Javascript, HTML et css dans Excel. Il est appelé Funfun et il accueille un éditeur en ligne avec une feuille de calcul incorporée afin que la transition n'est pas difficile, entre le site d'Excel.

    Voici un tableau que j'ai fait avec Highcharts:

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

    Dans cet exemple, j'ai pris la carte à partir d'un Highchart démo, et remplacé les données avec le mien.
    - Je stocker mes données dans la feuille de calcul incorporée, et grâce à un fichier json je peux l'utiliser dans mon code javascript.

    C'est comment je récupérer mes données de la feuille de calcul avec le fichier json:

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

    Je stocke dans mon script.js avec le bon format afin que je puisse charger directement dans Highcharts (pour les nombres, vous devez convertir vos données en flotte 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 que Vous avez sélectionné tous vous êtes des options pour votre graphique, vous pouvez ajouter vos données:

    series: [{
        data: data
    }]

    Une fois que vous êtes heureux avec votre carte, vous pouvez directement charger dans Excel par coller l'URL dans la Funfun complément. Voici à quoi il ressemble avec mon exemple:

    Comment Exporter JavaScript Tableau de fichier Excel (HighCharts)

    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 vieux post, mais j'espère que cela aide les gens avec le même problème.

    Divulgation : je suis un développeur de Funfun.

    OriginalL'auteur nicolas dejean

  5. 0

    Je sais que c'est trop tard mais j'ai le même problème et ce jsfiddle m'a aidé à créer excel à partir de highchart.
    Le Télécharger CSV ajout de l'option pour exporter dans le menu 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());
});

    OriginalL'auteur osyan