javascript - 将图表保存为图像或 pdf

Question

我正在尝试将图表保存为图像并最终保存为 pdf，但不太清楚如何操作。

在线我看到我能做

canvas.toDataURL("image/png")

但问题是我如何首先获得 Canvas ，示例说要使用

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 } }  });

有没有人有一个工作示例，可以绘制一个浮点图，然后有一个按钮可以保存/查看为图像或 pdf 格式？

有几个问题已经在某种程度上回答了这个问题，但据我所知，它们遗漏了一些关键细节——我很抱歉在这个问题上太啰嗦了。

Answer 1

您不会喜欢 flot v 0.7 解决方案。标签不在 Canvas 上，它们是位于 Canvas 周围的 HTML 元素。所以忘记将它们写入您的图像，它不会像 flot 那样发生。

如果你真的热衷于此，你需要做的是从 github 获取最新版本的 flot 以将标签写入 Canvas (这意味着你将无法在基础之外设置它们的样式 - 即没有 CSS 和没有让他们链接)，然后你会没事的(并且不要忘记看到新的 API.txt )。如果你需要获取 Canvas ，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 升级到最新(未发布)版本。