Question

我正在尝试将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图，然后有一个按钮来保存/查看为image或pdf？

有几个问题已经回答了这个问题，但据我所知，他们遗漏了一些关键细节 - 我对此感到抱歉。

Answer 1

你不会喜欢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升级到最新（未发布）版本。

Answer 2

我是通过使用名为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实现登录旁路到“虚拟”网站。

将flot图表保存为图像或pdf

2 个答案: