使用flot graph创建PDF报告
我正在尝试为我的客户实现自动报告生成工具。 我需要以pdf格式创建报告，我非常适合使用Jquery flot创建图形。 我只需要一种方法来获取pdf中的图形。
我尝试使用飞碟（xhtmlrenderer）捕获图形的图像，但它似乎没有帮助我，因为图形是由JavaScript创建的。
xhtmlrenderer可以捕获用javascript创建的元素吗？
或者是他们可以捕获图形图像的任何其他工具？
Flot在HTML5 元素上绘制图形。 所以可能的情况可能如下：
- 使用
toDataURL从canvas中检索图像数据，如本答案中所述 。 - 使用
addImage创建PDF，使用第一个示例中的addImage将图像嵌入其中。
但请注意，在这种情况下，您不会在图像中看到任何轴标签，因为它们不是在canvas上绘制的，它们是使用position:relative定位的简单
元素。 我发现这篇文章作者提供了一个Flot插件，它强制Flot在canvas上绘制文字，但我不知道它是否有效。 UPD：canvas上的绘图标签包含在即将发布的0.8版本中（参见评论）。
但是 图例也没有在canvas上绘制，它也是一个正确定位的
。 好像Flot社区中的人正试图用这个做点什么，我发现了两个拉取请求， 第一个修改核心， 另一个引入插件。 它们都没有被合并约9个月，并且它们被标记为v.9.0里程碑，这是在下一个并且没有到期日。 至少有可能克隆那些人的回购和测试他们的工作。
简历： Flot周围的很多人都关注这个问题，但遗憾的是没有稳定的，开箱即用的方式来实现这一目标 – 只有希望0.9最终有时会出现这个问题。
我已经把一个JSFiddle与一个如何用Flot + Html2Canvas + jsPDF实现这个的例子放在一起。 导出的PDF包括轴，图例等：
html2canvas($("#placeholder").get(0), { onrendered: function(canvas) { document.body.appendChild(canvas); var imgData = canvas.toDataURL('image/png'); var doc = new jsPDF('landscape'); doc.addImage(imgData, 'PNG', 10, 10, 190, 95); doc.save('sample-file.pdf'); } });
JS小提琴
如果您可以在服务器端执行此操作并且您使用的是基于Unix的系统，我会尝试使用wkhtmltopdf 。
一段时间后编辑
现在有一天，为了做这个服务器端我会使用真棒幻影 。 我已经在基于flot的项目上使用了一段时间，它完美无缺。