Sonntag, Dezember 8, 2019

Speichern flot Diagramm zu Bild-oder pdf

Ich bin versucht zu retten, eine flot-chart zu einem Bild und letztendlich zu einem pdf, aber kann nicht ganz herausfinden, wie.

Online sehe ich, dass ich tun kann,

canvas.toDataURL("image/png")

Aber das Problem ist, wie bekomme ich die Leinwand in den ersten Platz, die Beispiele sagen zu verwenden

document.getElementById("canvas");

aber für meinen code, den ich verwende ein div mit der id=“Platzhalter“ (für alle die flot Beispiele) und es ist nichts beschriftet mit einem canvas-Tags in meinem html -, und dieses scheint nicht zu funktionieren. Mein javascript für die flot sieht aus wie

$.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
          lines: { show:false },
          bars: { show: true, barWidth: 0.6, horizontal:true } }  });

Hat jemand ein funktionierendes Beispiel, dass Grundstücke flot Diagramm und hat dann eine Taste, um entweder speichern/Ansicht als Bild-oder pdf?

Gibt es einige Fragen, die Art der Antwort bereits, aber Sie fehlen einige wichtige details so weit wie ich erzählen kann-ich entschuldige mich für die Dicke auf diesen.

  • Also, was über var canvas = document.getElementById("placeholder"); oder $("#placeholder")[0]?
  • Danke Tomasz, wenn ich var canvas = document.getElementById("placeholder").firstChild; bekomme ich die Grafiken im Diagramm, aber nicht der text (Achsen, Beschriftungen usw.)

2 Kommentare

  1. 9

    Du bist nicht wie die flot v 0,7 Lösung für dieses. Die Etiketten sind nicht auf der Leinwand, Sie sind HTML-Elemente, die positioniert sind, um es. Also vergessen Sie über Sie geschrieben zu deinem Bild, es wird nicht passieren mit flot, wie Sie ist.

    Wenn Sie wirklich daran interessiert, was Sie tun müssen, ist Holen Sie sich die neueste version von flot aus github schreiben von Etiketten auf die Leinwand (was bedeutet, dass Sie nicht in der Lage sein Stil Ihnen über die Grundlagen hinaus – d.h. es werden keine CSS und keine macht Sie zu links), und dann wirst du in Ordnung sein (und nicht zu vergessen die neue API.txt). Wenn Sie brauchen, um die Leinwand, flot bietet eine Methode für das:

    var plot = $.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
              lines: { show:false },
              bars: { show: true, barWidth: 0.6, horizontal:true } }  });
    var ctx = plot.getCanvas();
    
    //do whatever with ctx.toDataURL("image/png")

    Die einzige änderung, die ich habe, wirklich, die hier vorgeschlagen wird, ist die Aktualisierung flot zu den neuesten (unveröffentlichten) version.

    • Dank ryley. das funktioniert vielleicht kurzfristig sowieso. gibt es eine Möglichkeit, nur packen die ganzen <div> und Rendern, html und Grafik enthalten?
    • Wenn Ihr Ziel ist zu Rendern PDF-Datei, ersetzen Sie die Leinwand mit einem Bild wird notwendig sein… dann, wenn Sie mit so etwas wie wkhtmltopdf oder dompdf, werden Sie in der Lage zu konvertieren, wenn der rest in Ordnung ist…
    • Wie Sie das Bild/PDF in Ordner oder als Datei?
  2. 1

    Habe ich dies durch die Verwendung einer Drittanbieter-Anwendung namens “ cutyCapt http://cutycapt.sourceforge.net/
    Diese snapshots von Webseiten. Also musste ich eine dummy-Webseite containig die flot Bild und dann fütterte die website mit dieser Funktion:

    public bool FlotToImage(string website, string destinationFile)
        {
            string cutyCaptPath = ConfigurationManager.AppSettings["CutyCaptPath"];
            if (!File.Exists(cutyCaptPath))//check if found cutyCapt application
            {
                return false;
            }
            ProcessStartInfo startInfo = new ProcessStartInfo();
            startInfo.FileName = cutyCaptPath; //path to executable file
    
            startInfo.Arguments = " --url=" + website + " --out=" + destinationFile;//the arguments
            startInfo.CreateNoWindow = true; //optional
            startInfo.WindowStyle = ProcessWindowStyle.Hidden; //optional
    
            Process process =Process.Start(startInfo);
            process.WaitForExit();
            return true;
        }

    Hoffe, das jemand hilft. Diese nahm ich eine Weile zu tun, da musste ich auch die Implementierung eines login-bypass“, um die „dummy“ – website mit dem flot.

Kostenlose Online-Tests

Letzte Fragen

Tun ItemView löst Blase?

Ich habe eine CompositeView für eine Tabelle. Ich habe Trigger-set in der Kind-ItemView für jede Zeile... var TableRow = Marionette.ItemView.extend({ tagName:...

Wie kann ich untersuchen, WCF was 400 bad request über GET?

Die folgenden WCF-endpoint funktioniert gut mit dem WCF test client: AssetList ListFlaggedAssets(short processCode, string platform, string endpoint = "null", string portalId = "null", int...

Bei der Verwendung von UUIDs, sollte ich auch mit AUTO_INCREMENT?

Wir bauen eine neue web-app, die eine offline-iPad - /Android-app-version auf einer Reihe von lokalen Geräten, die Einsätze mit neuen Daten. Als solche benötigen...

Actionscript-Objekt, das verschiedene Eigenschaften

Wie kann ich die Anzahl der Eigenschaften in einer generischen Actionscript-Objekt? (Wie die Array-Länge) InformationsquelleAutor Fragsworth | 2011-01-15

Wie plot mehrere Graphen und nutzen Sie die Navigations-Taste im [matplotlib]

Die neueste version von matplotlib erstellt automatisch Navigations-buttons unter den graph. Aber die Beispiele, die ich finden alles im Internet zeigen, wie erstellen Sie...