C3: Exporter ce superbe graphique

Salut ,

Les graphiques C3 sont les meilleurs graphiques disponibles. Je ne peux pas croire à quel point il est facile de générer un graphique.

La seule chose est que comment puis-je exporter un graphique?

S'il vous plaît, aidez-moi à cet égard.

Merci.

J'essaie également d'exporter le graphique au format pdf ou je veux le convertir en image ... si quelqu'un a une idée, aidez-moi

Ce n'est pas si facile à faire uniquement en Javascript, surtout si vous souhaitez prendre en charge de nombreuses versions de navigateur. Si le navigateur prend en charge le canevas (tous les navigateurs modernes le font), il existe un moyen assez simple. Vous pouvez utiliser la bibliothèque canvg (https://code.google.com/p/canvg/), qui convertit SVG en canevas.
Ensuite, quelque chose comme ça (http://www.nihilogic.dk/labs/canvas2image/) pour permettre à l'utilisateur de l'enregistrer comme fichier image localement. Je n'ai pas essayé cela moi-même, donc je ne peux pas dire si cela fonctionne de manière fiable avec les graphiques C3. Mais c'est une direction à explorer.

Salut, je trouve que cela pourrait être utile (http://jsfiddle.net/8ypxW/3/) mais je n'ai pas encore réussi.
Ce que j'essaye, c'est de mettre notre graphique C3 (balise div) dans le code original (balise span) mais le résultat du téléchargement que j'obtiens est une image vide !!!
Mise à jour: http://jsfiddle.net/panubear/mGDt8/ >> L'image de sortie a été produite sans graphique c3.

Je fais cela pour le générateur de graphiques basé sur C3 sur lequel je travaille, je partagerai mon code une fois terminé. D' accord avec @lblb point de » au sujet canvg, c'est ce que l' utilisation du quartz dans leur ChartBuilder. Pour savoir comment procéder, en plus de la sortie de fichiers PNG, voir: https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295

D'accord, ça marche. Voici ma directive angulaire pour faire cela , très sans vergogne tirée de Quartz / Chartbuilder . Ignorez tous les trucs angulaires, tout le vrai travail est fait dans createChartImages() .

En bref, voici ce que je devais faire:

1. Créez un élément canvas vide.
2. Prenez tous les styles de c3.js et mettez-les en ligne sur la plupart des éléments SVG, en prenant soin de ne faire cela à aucun de vos objets liés aux données (qui sont colorés via l'attribut CSS style. La ligne 6 de c3.css sera remplacez toutes les couleurs de ligne de données définies via C3 par stroke: #000 et fill: none .).
3. Trouvez tous les éléments qui ont "masqué" pour la propriété CSS "visibilité" et définissez-les sur "display: none". Cela masque tous les axes inutilisés de C3.
4. Définissez fill: none sur tous les chemins de données SVG afin de ne pas obtenir l'effet de détourage bizarre de Bézier.
5. À l'aide de Canvg , générez un PNG. Il y a aussi une fonction pour générer un SVG dans ma directive, en utilisant un extrait du NYT.

Notez que je n'ai vraiment testé cela qu'avec des graphiques de séries simples, il est très possible que les autres types de graphiques aient des problèmes et aient besoin de leurs propres ajustements spécifiques.

Edit: Il semble que les types "zone" cassent totalement la sortie PNG, bien que la sortie SVG semble correcte. Je l'ai corrigé pour que la sortie SVG fonctionne pour tous les types de graphiques, AFAIK.

Dernière modification: j'ai mis à jour le Gist, cela devrait fonctionner pour tous les types de graphiques maintenant, à la fois PNG et SVG. dans l'espoir de publier LlamaCharts dans les prochains jours si quelqu'un veut jouer avec une implémentation fonctionnelle.

Salut @aendrew

J'ai travaillé sur un exportateur, qui prend en charge .png , .jpeg , .gif et .pdf . s'il vous plaît voir ma demande de tirage ici

Cependant, ma méthode est une implémentation _server-side_ qui repose sur phantomjs. À mon avis, ce serait une bonne idée d'avoir également un exportateur côté client. J'aimerais voir votre version complète

@yuvii Salut! J'ai publié mon projet (j'aurais probablement dû mettre à jour ce problème ...), c'est parfois / axisJS .

Vous pouvez jouer avec en ligne sur http://times.github.io/axisJS/

PDF est super utile, jettera un œil à votre PR. J'ai finalement besoin de formats d'impression pour axisJS sous peu ...

Oh wow, vous êtes en fait allé de l'avant et avez créé une interface graphique complète pour cela. Je viens de créer un outil en ligne de commande pour l'exportation. Très cool, mec.

C'est un peu plus un problème de support à ce stade que quoi que ce soit d'aussi proche. L' outil CLI de

Quiconque arrive à cela, l' implémentation de ici fait ce que j'ai fait avec Angular, mais avec jQuery - pourrait être un exemple plus facile que celui que j'ai donné!

Salut, j'essaye de convertir le diagramme c3 ie SVG en image mais ça ne fonctionne pas.
On dirait que c3.css, qui est un css externe, n'est pas appliqué.
Comment appliquer le CSS externe à un SVG

@ raj-mehta Veuillez demander sur le groupe C3 Google , il s'agit d'un problème clos et le manque de détails que vous avez fournis avec votre requête rend pratiquement impossible de vous aider.

Merci pour votre retour,
J'utilise le svg suivant et utilisé sur ur sample.html mais le graphique sur le navigateur et l'image convertie de canvg ne correspondent pas.

J'obtiens le même problème que raj-mehta avec les barres à axe extra large. Avez-vous trouvé une solution à cela?

Le problème est que seuls les styles en ligne sont importants lors de l'exportation. J'ai modifié ma version locale de c3 pour inclure un style supplémentaire (comme fill-opacity: 0 pour les graphiques linéaires qui montrent un arrière-plan noir étrange) et l'image sort comme vous vous attendez.

@aendrew s'il vous plaît dites-moi la source de ce http://times.github.io/axisJS/#/ j'ai besoin de ce tutoriel..s'il vous plaît aidez-moi

Vous pouvez ajouter une fonction d'exportation PNG aux graphiques c3 en utilisant mon module: https://github.com/annatomka/ng-c3-export

Salut @annatomka puis-je utiliser https://github.com/annatomka/ng-c3-export avec des graphiques de charge asynchrone? Mon code:

app.controller ("ChartController", fonction ($ http) {
$ http.get ('URL').
success (fonction (données, état, en-têtes, configuration) {
c3.generate ({
bindto: "# My-chart",
Les données: {
tapez: 'tarte',
Colonnes: [
['échantillon', 30],
['échantillon2', 200]
]
}
});
}).
erreur (fonction (données, état, en-têtes, configuration) {
débogueur;
});

- Dessine correctement le graphique mais pas d'icône de téléchargement

@annatomka Excellent module mais j'ai aussi des problèmes avec les graphiques de chargement asynchrone. Le bouton de téléchargement disparaît une fois que je régénère le graphique.

@annatomka C'est tellement bon! J'utilise totalement votre module prochain projet Angular que je fais!

@annatomka +1

@ morales-franco @johnmarkli J'ai corrigé le problème de chargement asynchrone, vous pouvez l'essayer dans la nouvelle version (0.1.5). J'ai aussi ajouté quelques exemples.

@annatomka Mon graphique à

qu'est-ce que je manque en css?

@annatomka Excellent module mais j'ai aussi des problèmes avec les navigateurs. Cela ne fonctionne pas sur votre module Internet Explorer. Pouvez-vous s'il vous plaît corriger le bogue? Merci

Sérieusement ici, les gens. Si vous rencontrez des problèmes avec annatomka / ng-c3-export, signalez-les dans la file d'attente des problèmes annatomka / ng-c3-export .

Filetage de verrouillage.