Highcharts Exportfunktionalität

Question

Kennt jemand eine Möglichkeit, automatisch ein SVG -Diagramm zu erstellen und eine JPEG- oder PNG -Bildversion des Highacarts -Diagramms gleichzeitig zu exportieren (vorzugsweise auf $(document).ready)?

Ich möchte die SVG -Version für den Bildschirm anzeigen und die PNG oder JPEG in eine versteckte DIV für den Druck einfügen.

Danke im Voraus.

Answer 1

Meine Lösung erstellt automatisch ein äquivalentes Bild des SVG jedes Diagramms in meiner Seite/meinem Dashboard (im Startzustand), ohne dass ein Benutzer sie einzeln exportieren muss. Dadurch können alle Highcharts -Diagramme und Diagramme auf einer Seite korrekt gedruckt werden, ohne dass die Benutzerinteraktion erforderlich ist.

Der Grund dafür, dass Seiten mit Highcharts -Diagrammen nicht korrekt drucken, liegt darin, dass die Diagramme mit SVG erstellt werden und die aktuellen Versionen der gemeinsamen Browser SVG nicht unterstützen (geschrieben Januar 2012). Meine Lösung wird daher irrelevant sein, wenn sie dies tun.

Meine Lösung geht um diese aktuelle Browserbeschränkung:

Erstens habe ich die Highcharts geändert exporting.js Datei, um die Routine automatisch auszulösen, die normalerweise ausgelöst wird, wenn der Benutzer manuell ein Bild exportiert.

Als nächstes ist es wichtig zu beachten, dass ein Benutzer, wenn ein Benutzer manuell ein Bild exportiert, seine Anfrage als Header -Anfrage der Gesamtseite gesendet wird.

Daher wird meine Änderung der Exportfunktion die Highcharts -Daten nicht direkt veröffentlicht, sondern zuerst die SVG und andere erforderliche Daten veröffentlicht, die Highcharts in meiner Seite/meinem Dashboard Divs benötigen.

Jedes DIV, der die Anforderung empfängt, enthält eine PHP -Datei, deren Routine json_encodes Die Postdaten, die sie von der Exportroutine erhält, und sie dann als eigener Header auf Highcharts -Exportserver veröffentlichen.

Da der Beitrag aus dieser Div ausgelöst wird, wird das Ergebnis direkt in diese DIV als Header des PHP -Skripts in dieser Div zurückgeschickt.

Sobald es an diesen Div zurückgesandt wurde, habe ich das Bild gespeichert, den Div nur über CSS gedruckt und die einzige HTML -Ausgabe dieses DIV das IMG -Tag mit dem Bilddateipfad war.

Ich löste alle Divs aus $(document).ready.

Ein Hinweis an alle anderen, die dies versuchen, ist, dass sich die Konfiguration meines Entwicklers und meines Live -Servers unterschieden, was bedeutet, dass ich es musste stripslashes Der JSON auf einem von ihnen, bevor er es an Highcharts schickte.

Die folgenden Beiträge zeigen jeden anderen, der versucht, dies in die richtige Richtung zu tun.

Speichern Sie das Google -Diagramm -Bild in Datei mit PHP

Posting zu einem Div:

Postform in jQuery und divuliert - gebrochen in IE