如何使用 Flot 画布插件

Question

我正在使用 Flot 构建 Rails 3.2.11 应用程序。我想使用 Prawn 在 PDF 中呈现我的 Flot 图表。我的 Flot 图表在浏览器中呈现良好。我可以很好地创建 Prawn PDF（虽然还没有图表图像）。

我想使用 Flot 画布插件在画布上渲染我的轴等，以便在我使用 .getCanvas() 和 将图像数据 Ajax 到服务器时包含它们>.toDataURL() 方法，但我似乎无法让它工作。

我正在使用 jquery.flot.min.js 0.8.0 和 jquery.flot.canvas.min.js（未指明版本）。在 Chrome 控制台中，我看到两者都在加载。

我的 Coffeescript 看起来像这样：

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，并包含了 0.8.1 .zip 存档中的 jquery.flot.canvas.js 文件。 （我在使用 Flot 0.8.0 和 jquery.flot.js 0.8.1 的插件时遇到了一些奇怪的渲染行为，所以要小心。）

现在我的坐标轴在画布上呈现。伟大的！感谢弗洛特诸神！

Answer 1

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

不过，您的 Flot 版本不能是 1.1；最新的是0.8.1，0.8.0引入了jquery.flot.canvas.min.js。所以你使用了错误的版本，或者一些可能不支持画布插件的 Flot 衍生产品。

请注意，画布插件目前只影响轴；图例仍以 HTML 格式呈现。 0.9 版将全面支持在画布上渲染所有内容。