将浮点图保存为图像或pdf [英] Saving flot chart to image or pdf

问题描述

我正在尝试将浮动图表保存到图像中，并最终保存到pdf中，但还不太清楚如何保存.

I'm trying to save a flot chart to an image and eventually to a pdf, but can't quite figure out how.

网上看到我可以做到

canvas.toDataURL("image/png")

但是麻烦的是我如何首先获得画布，示例说要使用

But the trouble is how do I get the canvas in the first place, the examples say to use

document.getElementById("canvas");

但是对于我的代码，我使用的是带有id ="placeholder"的div(在所有flot示例中)，并且我的html中没有标有canvas标记的东西，这似乎不起作用.我的flo javascript看起来像

but for my code I'm using a div with id="placeholder" (per all the flot examples) and there's nothing labeled with a canvas tag in my html, and this doesn't seem to work. My javascript for flot looks like

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

有人能绘制浮点图，然后有一个按钮将其保存为图像或pdf的示例吗?

Does anyone have a working example that plots a flot graph and then has a button to either save/view as image or pdf?

已经有几个问题已经回答了这个问题，但是据我所知，他们一直缺少一些关键细节，对此我深表歉意.

There are several questions that sort of already answer this, but they are missing some key details as far as I can tell -- my apologies for being thick on this.

推荐答案

您不会喜欢flot v 0.7解决方案.标签不在画布上，它们是放置在画布周围的HTML元素.因此，请不要再将它们写到您的图像上了，它不会像以前那样随随便便出现.

You're not going to like the flot v 0.7 solution for this. The labels are not on the canvas, they are HTML elements that are positioned around it. So forget about having them written to your image, it's not going to happen with flot as is.

如果您真的很热衷，您需要做的是从 github 来将标签写到画布上(这意味着您将无法在基本样式之外设置标签样式-即没有CSS，也没有使其链接)，然后您就可以了(并且不要忘记查看新的 API.txt ).如果您需要获取画布，flot提供了一种方法:

If you are really keen, what you need to do is get the latest version of flot out of github to write labels to the canvas (which means you won't be able to style them beyond the basics - i.e. no CSS and no making them links), and then you'll be OK (and don't forget to see the new API.txt). If you need to get the canvas, flot provides a method for that:

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升级到最新(未发行)版本.

The only change I've really suggested here is to upgrade flot to the latest (unreleased) version.

这篇关于将浮点图保存为图像或pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！