如何将实时flot图表保存为图像？

Question

我知道这类问题已经完成。我已经看到了关于这个主题的答案，但我实际上并不了解如何将flot图表保存为图像（png或jpeg）。 Bellow你有我的实时图表的打印屏幕。 。

当我点击＆＃34;将图像另存为...＆＃34;保存的照片完全是黑色的。我尝试了很多方法，但没有一个适合我。那么如何将图形保存为图像呢？

Answer 1

以下是您在评论中发布的updated version of the fiddle。单击链接后，它不会生成图像和PDF文档，而是在绘制图表后直接创建图像并隐藏原始画布。在新图表上使用“将图像另存为...”对我来说很好。代码：

$.plot($("#placeholder"), [{
  label: 'Test',
  data: [
    [0, 0],
    [1, 1]
  ]
}], {
  yaxis: {
    max: 1
  }
});

html2canvas($("#placeholder").get(0), {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
    $('#placeholder').hide();
  }
});

绘制新图表时（更改选项后），您必须show()原始容器并删除副本，然后再次调用html2canvas(...)。