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.)

InformationsquelleAutor OneSolitaryNoob | 2012-03-13

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?
InformationsquelleAutor Ryley

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.

InformationsquelleAutor joecop

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.