Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/446.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将flot图表保存到图像或pdf_Javascript_Pdf Generation_Flot - Fatal编程技术网

Javascript 将flot图表保存到图像或pdf

Javascript 将flot图表保存到图像或pdf,javascript,pdf-generation,flot,Javascript,Pdf Generation,Flot,我正试图将flot图表保存到一个图像,并最终保存到pdf,但不太清楚如何保存 在网上我看到我能做到 canvas.toDataURL("image/png") 但问题是首先我如何获得画布,示例中说要使用它 document.getElementById("canvas"); 但是对于我的代码,我使用了一个id=“placeholder”的div(根据所有flot示例),在我的html中没有任何标记为canvas标记的内容,这似乎不起作用。我的flot javascript看起来像 $.plo

我正试图将flot图表保存到一个图像,并最终保存到pdf,但不太清楚如何保存

在网上我看到我能做到

canvas.toDataURL("image/png")
但问题是首先我如何获得画布,示例中说要使用它

document.getElementById("canvas");
但是对于我的代码,我使用了一个id=“placeholder”的div(根据所有flot示例),在我的html中没有任何标记为canvas标记的内容,这似乎不起作用。我的flot javascript看起来像

$.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
          lines: { show:false },
          bars: { show: true, barWidth: 0.6, horizontal:true } }  });
是否有人有一个绘制flot图的工作示例,然后有一个保存/查看为图像或pdf的按钮


有几个问题已经回答了这个问题,但据我所知,它们缺少了一些关键的细节——我很抱歉在这个问题上说得太多。

你不会喜欢flot v 0.7解决方案的。标签不在画布上,它们是围绕画布放置的HTML元素。所以,忘了把它们写在你的图片上吧,这不会发生在flot上

如果你真的很感兴趣,那么你需要做的就是使用最新版本的flot将标签写到画布上(这意味着你将无法对它们进行超出基础的样式设置,即没有CSS,也没有链接),然后你就没事了(别忘了看新的)。如果需要获取画布,flot提供了一种方法:

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

我在这里真正建议的唯一更改是将flot升级到最新(未发布)版本。

我是通过使用名为cutyCapt的第三方应用程序来实现的 这将拍摄网页的快照。因此,我必须创建一个包含flot图像的虚拟网页,然后将网站提供给此功能:

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;
    }

希望这对别人有帮助。这实际上花了我一段时间,因为我还必须使用flot实现对“虚拟”网站的登录绕过。

那么
var canvas=document.getElementById(“占位符”)呢
$(“#占位符”)[0]
?感谢Tomasz,如果我这样做
var canvas=document.getElementById(“占位符”).firstChild我得到图表的图形,但没有文本(轴、标签等),谢谢ryley。无论如何,这在短期内可能会奏效。有没有什么方法可以抓取整体并渲染它,包括html和图表?如果你的最终目标是渲染为PDF,那么用图像替换画布是必要的。。。然后,如果您使用的是wkhtmltopdf或dompdf之类的东西,它们将能够很好地转换其余部分……如何将此图像/PDF保存在文件夹或文件中?