将flot图表保存为图像或pdf格式

Saving flot chart to image or pdf

本文关键字：图像 pdf 格式 保存 flot      更新时间：2023-09-26

我试图将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不会像现在这样。

如果你真的很感兴趣，你需要做的是从github中获取最新版本的flot，将标签写入画布（这意味着你将无法对它们进行超出基础的样式设置，即没有CSS，也没有链接），然后你就可以了（别忘了看新的API.txt）。如果你需要获取画布，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的第三方应用程序http://cutycapt.sourceforge.net/这会获取网页的快照。所以我不得不创建一个包含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实现对"虚拟"网站的登录绕过。

相关文章：