Handlung.vorstellen

Bilder sind ein wichtiges Werkzeug bei der Arbeit mit statistischen Zahlen. Sie ermöglichen es Ihnen, die Figuren in statische Bilder zu exportieren, die Sie teilen oder auf eine Website hochladen können.

In diesem Artikel werden wir untersuchen, wie wir die Handlungsfiguren mithilfe der Handlung in statische Bilder exportieren können.JS toimage () Funktion.

Ohne viel weiter zu tun, lasst uns eintauchen.

Handlung.vorstellen()

Um einen Handlungsschreiber zu exportieren.JS -Figuren in ein statisches Bild, wir verwenden die Funktion toimage (). Die Funktionssyntax ist wie im Folgenden dargestellt:

toimage (Format: target_image_format, width: gewünscht_image_size_in_pixels, Höhe: WANTIRE_IMAGE_SIZE_IN_PIXELS).

Wie wir sehen können, hat die Funktion eine relativ einfache und unkomplizierte Syntax.

Beispiel 1: Plotly.JS -Exportfigur zur statischen PNG -Datei

Lassen Sie uns veranschaulichen, wie wir eine Handlung exportieren können.JS -Abbildung unter Verwendung der Funktion toimage (). Für dieses Tutorial erstellen wir ein einfaches Balkendiagramm, wie im folgenden Code gezeigt:

Im angegebenen Code verwenden wir die Handlung.JS, um ein Bardiagramm der Browserverwendung zu erstellen. Wir können den Code ausführen und das Diagramm wie in Folgendes angezeigt werden:

Wir können jetzt das Balkendiagramm in einem statischen Bild speichern, wie im folgenden Code gezeigt:

In diesem Beispiel verwenden wir die D3 -Bibliothek, um zu zeichnen. Wir rufen zunächst die Handlung an.toimage () Funktion und übergeben die Daten einschließlich der Funktion zum Exportieren des Bildes. Wir übergeben auch das Format, in dem wir das Bild in diesem Fall als PNG -Datei exportieren möchten.

Schließlich zeichnen wir das Bild mit der ID von PNG-Export in das IMG-Tag mit der in der Variablen angegebenen ID von PNG-Export auf.

Wir können den Code im Browser ausführen.

Sie können jetzt die Browser -Tools verwenden, um das Bild in eine Datei auf Ihrer Festplatte zu exportieren.

Beispiel 2: Plotly.JS speichern Bild als JPEG/JPG

Sie können auch eine Figur als JPG/JPEG -Format exportieren, indem Sie den Formatparameter angeben. Ein Beispielcode ist wie im Folgenden dargestellt:

IMG_JPG.Attr ("Src", URL);
Handlung.toimage (gd, format: "jpeg", width: target_width, Höhe: target_width);

Der gleiche Fall gilt beim Exportieren eines Bildes als SVG.

IMG_SVG.Attr ("Src", URL);
Handlung.toimage (gd, format: 'svg', width: target_width, Höhe: target_height);

Abschluss

In diesem Tutorial haben Sie gelernt, wie Sie eine Handlungsfigur in ein statisches PNG-, JPG- oder SVG.JS. Glückliche Codierung!!