C3: Exportieren dieses erstaunlichen Diagramms

Hallo ,

C3-Diagramme sind die besten verfügbaren Diagramme. Ich kann nicht glauben, wie einfach es ist, Diagramme zu erstellen.

Das einzige ist, wie exportiere ich ein Diagramm?

Bitte helfen Sie mir in dieser Hinsicht.

Vielen Dank.

Ich versuche auch, das Diagramm als PDF zu exportieren oder ich möchte es in ein Bild konvertieren ... Wenn jemand eine Idee hat, helfen Sie bitte

Es ist nicht so einfach, dies nur in Javascript zu tun, insbesondere wenn Sie viele Browserversionen unterstützen möchten. Wenn der Browser Canvas unterstützt (alle modernen Browser), gibt es einen ziemlich einfachen Weg. Sie können die Bibliothek canvg (https://code.google.com/p/canvg/) verwenden, mit der SVG in Zeichenfläche konvertiert wird.
Dann so etwas (http://www.nihilogic.dk/labs/canvas2image/), damit der Benutzer es lokal als Bilddatei speichern kann. Ich habe das allerdings nicht selbst versucht, daher kann ich nicht sagen, ob es mit C3-Charts zuverlässig funktioniert. Aber dies ist eine Richtung zu erkunden.

Hallo, ich finde das vielleicht nützlich (http://jsfiddle.net/8ypxW/3/), aber ich bin noch nicht erfolgreich.
Ich versuche, unser C3-Diagramm (div-Tag) in den Originalcode (span-Tag) einzufügen, aber das Download-Ergebnis ist ein leeres Bild !!!
Update: http://jsfiddle.net/panubear/mGDt8/ >> Das Ausgabebild wurde ohne c3-Diagramm erstellt.

Ich mache dies für den C3-basierten Diagramm-Builder, an dem ich arbeite. Er wird meinen Code freigeben, sobald er fertig ist. In Übereinstimmung mit https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295

Okay, das hat funktioniert. Hier ist meine Angular-Direktive dafür , die viel schamlos von Quartz / Chartbuilder übernommen wurde . Ignoriere alle Angular-Sachen, die ganze Arbeit wird in createChartImages() erledigt.

Kurz gesagt, hier ist, was ich tun musste:

1. Erstellen Sie ein leeres canvas -Element.
2. Nehmen Sie alle Stile aus c3.js und machen Sie sie für die meisten SVG-Elemente inline. Achten Sie dabei darauf, dass Sie dies nicht mit Ihren datenbezogenen Objekten tun (die über das CSS-Stilattribut farbig sind. Zeile 6 von c3.css wird dies tun Ersetzen Sie alle über C3 eingestellten Datenleitungsfarben durch stroke: #000 und fill: none .).
3. Suchen Sie nach Elementen, die für die CSS-Eigenschaft "Sichtbarkeit" "ausgeblendet" sind, und setzen Sie diese auf "Anzeige: keine". Dadurch werden alle nicht verwendeten Achsen von C3 ausgeblendet.
4. Stellen Sie fill: none für alle SVG-Datenpfade ein, damit Sie nicht den seltsamen Bezier-Clipping-Effekt erhalten.
5. Generieren Sie mit

Hinweis: Ich habe dies nur mit einfachen Seriendiagrammen wirklich getestet. Es ist sehr wahrscheinlich, dass die anderen Diagrammtypen Probleme haben und ihre eigenen spezifischen Anpassungen benötigen.

Bearbeiten: Scheint, dass die "Bereich" -Typen die PNG-Ausgabe vollständig unterbrechen, obwohl die SVG-Ausgabe in Ordnung zu sein scheint. Ich habe es behoben, damit die SVG-Ausgabe für alle Diagrammtypen funktioniert, AFAIK.

Letzte Änderung

Hallo @aendrew

Ich habe an einem Exporteur gearbeitet, der .png , .jpeg , .gif und .pdf . Bitte sehen Sie meine Pull-Anfrage hier

Meine Methode ist jedoch eine serverseitige Implementierung, die auf Phantomjs basiert. Meiner Meinung nach wäre es eine gute Idee, auch einen Exporteur auf Kundenseite zu haben. Ich würde gerne Ihre fertige Version sehen

@yuvii Hallo! Ich habe mein Projekt veröffentlicht (hätte dieses Problem wahrscheinlich aktualisieren sollen ...), es ist manchmal / axisJS .

Sie können online unter http://times.github.io/axisJS/ damit spielen.

PDF ist super nützlich, werfen Sie einen Blick auf Ihre PR. Ich brauche irgendwann in Kürze Druckformate für axisJS ...

Oh wow, du hast tatsächlich eine komplette GUI dafür erstellt. Ich habe gerade ein Kommandozeilen-Tool zum Exportieren erstellt. Sehr cool, Mann.

Dies ist an dieser Stelle eher ein Support-Problem als etwas so Abschlussendes. Das CLI-Tool von

Jeder, der dazu kommt, @gonsakons Implementierung hier macht das, was ich mit Angular gemacht habe, aber mit jQuery - könnte ein einfacheres Beispiel sein als das, das ich gegeben habe!

Hallo, ich versuche, c3-Diagramm, dh SVG, in Image zu konvertieren, aber es funktioniert nicht.
Es sieht so aus, als würde c3.css, ein externes CSS, nicht angewendet.
Wie können wir das externe CSS auf eine SVG anwenden?

@ raj-mehta Bitte fragen Sie bei der C3 Google Group nach , dies ist ein geschlossenes Problem, und der Mangel an Details, den Sie bei Ihrer Anfrage angegeben haben, macht es praktisch unmöglich, Ihnen zu helfen.

Vielen Dank für Ihre Rückkehr,
Ich benutze das folgende svg und verwende es auf ur sample.html, aber das Diagramm im Browser und das konvertierte Bild von canvg stimmen nicht überein.

Ich habe das gleiche Problem wie Raj-Mehta mit den extra breiten Achsenstangen. Haben Sie eine Lösung dafür gefunden?

Das Problem ist, dass beim Exportieren nur Inline-Stile eine Rolle spielen. Ich habe meine lokale Version von c3 so geändert, dass sie ein zusätzliches Styling enthält (z. B. Füllopazität: 0 für Liniendiagramme mit einem seltsamen schwarzen Hintergrund), und das Bild wird wie erwartet angezeigt.

@aendrew Bitte teilen Sie mir die Quelle dieses http://times.github.io/axisJS/#/ mit. Ich brauche dieses Tutorial. Bitte helfen Sie mir

Sie können PN3-Exportfunktionen mithilfe meines Moduls zu c3-Diagrammen hinzufügen: https://github.com/annatomka/ng-c3-export

Hallo @annatomka, kann ich https://github.com/annatomka/ng-c3-export mit asynchronen Ladediagrammen verwenden? Mein Code:

app.controller ("ChartController", Funktion ($ http) {
$ http.get ('URL').
Erfolg (Funktion (Daten, Status, Header, Konfiguration) {
c3.generate ({
bindto: "# My-chart",
Daten: {
Typ: 'Kuchen',
Säulen: [
['Probe', 30],
['sample2', 200]
]]
}}
});
}).
Fehler (Funktion (Daten, Status, Header, Konfiguration) {
Debugger;
});

- Zeichnet das Diagramm korrekt, aber ohne Download-Symbol

@annatomka Tolles Modul, aber ich habe auch Probleme mit dem asynchronen Laden von Grafiken. Der Download-Button verschwindet, sobald ich das Diagramm neu generiere.

@annatomka Das ist so gut! Ich benutze dein Modul als nächstes Angular-Projekt, das ich mache!

@annatomka +1

@ morales-franco @johnmarkli Ich habe das Problem mit dem asynchronen Laden behoben. Sie können es in der neuen Version (0.1.5) ausprobieren. Ich habe auch einige Beispiele hinzugefügt.

@annatomka Mein

Was fehlt mir in CSS?

@annatomka Tolles Modul, aber ich habe auch Probleme mit den Browsern. Es funktioniert nicht mit Internet Explorer Ihr Modul. Können Sie bitte den Fehler beheben? Vielen Dank

Ernsthaft hier, Leute. Wenn Sie Probleme mit annatomka / ng-c3-export haben, melden Sie diese in der Problemwarteschlange annatomka / ng-c3-export .

Sperrfaden.