使用flot graph创建PDF报告 [英] Creating PDF reports with flot graph

问题描述

我正在尝试为我的客户实施自动报告生成工具。
我需要以pdf格式创建报告，我非常适合使用Jquery flot创建图形。我只需要一种方法来获取pdf中的图形。

I am trying to implement an automatic report generation tool for my clients . I need to create reports in pdf format and i am very much comfortable in creating graphs using Jquery flot. I just need a way to get the graphs inside the pdf.

我尝试使用飞碟（xhtmlrenderer）来捕获图形的图像，但它似乎没有帮助我，因为图形由javascript创建。

I tried using flying saucer (xhtmlrenderer) to capture the image of the graph, but it doesn't seem to help me as the graphs being created by javascript.

xhtmlrenderer可以捕获用javascript创建的元素吗？

can xhtmlrenderer capture the elements created with javascript ?

或者是他们可以捕获图形图像的任何其他工具吗？

or is their any other tool which can capture the image of the graph ?

推荐答案

Flot绘制它HTML5上的图表< canvas> 元素。所以可能的情况可能如下：

Flot draws its graph on HTML5 <canvas> element. So the possible scenario might be as follows:

1. 使用 toDataURL 如此答案中所述。


2. 使用 jsPDF ，使用 addImage ，如第一个示例中所示，将图像嵌入其中。

1. Retrieve image data from canvas with toDataURL as described in this answer.
2. Create a PDF with jsPDF, use addImage as in first example to embed the image into it.

但是注意，在这种情况下，您不会在图像中看到任何轴标签，因为它们不是在画布上绘制的，它们是简单的< div> 元素，位置为 position：relative 。我找到了这篇文章作者提供了一个Flot插件，它强制Flot在画布上绘制文本，但我不知道它是否有效。 UPD：画布上的绘图标签包含在即将发布的0.8版本中（参见注释） ）。

BUT note, in this scenario you will not see any axis labels in image, because they are not drawn on canvas, they are simple <div> elements positioned with position:relative. I found this post where the author offers a Flot plugin which forces Flot to draw text on canvas, but I have no idea whether it works. UPD: Drawing labels on canvas is included in oncoming 0.8 release (see comments).

但 ² 图例也没有在画布上绘制，它也是一个正确定位的< div> 。好像Flot社区中的人正试图对此做些什么，我发现了两个拉取请求，第一个修改核心，另一个介绍插件。它们都没有被合并约9个月，并且它们被标记为v.0.9里程碑，这是在下一个并且没有到期日。至少可以克隆这些人的回购并测试他们的工作。

BUT² the legend is also not drawn on canvas, it is also a properly positioned <div>. Seems like people in the Flot community are trying to do something with this, I have found two pull requests, the first modifying the core, the other introducing a plugin. Neither of them is merged for about 9 months, and they are marked for v. 0.9 milestone which is after-next and has no due date. At least it is possible to clone those people repos and test their work.

简历：很多人在Flot周围都关心这个问题，但遗憾的是，没有稳定的，开箱即用的方式来做到这一点 - 只有希望0.9最终有时会出现这个问题。

Resume: many people around Flot are concerned with this issue, but sadly there is no stable, out-of-box way to do it yet — only the hope that 0.9 will finally come out sometimes with this issue addressed.

这篇关于使用flot graph创建PDF报告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！