将flot图表保存为图像或pdf

Question

我正在尝试将flot图表保存到图像并最终保存为pdf,但无法弄清楚如何.

在网上我看到我能做到

canvas.toDataURL("image/png")

但问题是如何首先获得画布,示例说要使用

document.getElementById("canvas");

但是对于我的代码,我使用了一个id ="placeholder"的div(根据所有flot示例)并且在我的html中没有使用canvas标记标记,这似乎不起作用.我的jot for flot看起来像

$.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
          lines: { show:false },
          bars: { show: true, barWidth: 0.6, horizontal:true } }  });

有没有人有一个工作示例绘制一个flot图,然后有一个按钮来保存/查看为图像或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升级到最新(未发布)版本.