Question

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

我想使用Flot画布插件在画布上渲染我的轴等，以便在使用 .getCanvas（）和 .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获得了一些奇怪的渲染行为，所以请注意这一点。）

现在我的轴在画布上呈现。大！我要感谢Flot众神！

Answer 1

你的选择看起来没问题，假设（我不熟悉CoffeeScript）最后一点应该是缺少大括号。

你的Flot版本不能是1.1;最新的是0.8.1，jquery.flot.canvas.min.js是在0.8.0中引入的。因此，您使用的是错误的版本，或者某些可能不支持canvas插件的Flot-derivative。

请注意，canvas插件目前仅影响轴;图例仍以HTML格式呈现。完全支持在画布上渲染所有内容将在0.9中出现。

如何使用Flot canvas插件

1 个答案: