如何使用Flot画布插件

Question

我正在用Flot构建一个Rails 3.2.11应用程序。我想要渲染我的斑纹图在PDF使用对虾。我的Flot图表在浏览器中呈现的很好。我可以创建对虾PDF很好(虽然还没有与图表图像)。

我想使用Flot画布插件在画布上呈现我的轴等等，所以当我使用.getCanvas()和.toDataURL()方法将图像数据Ajax到服务器时，它们就会包括在内，但我似乎无法让它工作。

我使用的是jquery.flot.min.js 0.8.0和jquery.flot.canvas.min.js (没有显示版本)。在Chrome控制台中，我看到两者都在加载。

我的咖啡记录是这样的：

temp_plot = $.plot $("#barchart"), [
    data: $("#barchart").data("bardata")
    bars:
      show: true
      barWidth: (365/12)*24*60*60*1000*0.8
      align: 'center'
  ],
    xaxis:
      mode: "time"
      timeformat: "%b"
      tickSize: [1, "month"]
    yaxis:
      position: 'right'
      labelWidth: '40'       
      reserveSpace: true
    canvas: true

barchart_canvas = temp_plot.getCanvas()

我能够看到Ajax的有效载荷，它确实是Flot图表画布，只是没有轴，等等，我很感激任何建议。谢谢!

为了更清楚起见，Javascript的代码如下所示：

var barchart_canvas, temp_plot;

temp_plot = $.plot($("#barchart"), [
  {
    data: $("#barchart").data("bardata"),
    bars: {
      show: true,
      barWidth: (365 / 12) * 24 * 60 * 60 * 1000 * 0.8,
      align: 'center'
    }
  }
], {
  xaxis: {
    mode: "time",
    timeformat: "%b",
    tickSize: [1, "month"]
  },
  yaxis: {
    position: 'right',
    labelWidth: '40',
    reserveSpace: true
  },
  canvas: true
});

barchart_canvas = temp_plot.getCanvas();

更新-成功

我将Flot更新为0.8.1，并将jquery.flot.canvas.js文件包含在0.8.1 .zip存档中。(我在使用jquery.flot.js 0.8.1的Flot 0.8.0插件时遇到了一些奇怪的渲染行为，所以要小心。)

现在我的斧子在画布上渲染。太棒了！感谢佛洛特众神！

Answer 1

您的选项看起来还不错，假设(我不熟悉CoffeeScript)最后一点应该是缺少花括号。

但是，Flot版本不能是1.1；最新版本是0.8.1，jquery.flot.canvas.min.js是在0.8.0中引入的。所以你要么使用错误的版本，要么使用不支持画布插件的Flot衍生工具。

请注意，画布插件目前只影响轴；图例仍然以HTML呈现。对呈现画布上所有内容的完整支持将在0.9版中出现。