如何使用Flot canvas插件 [英] How to use Flot canvas plugin

问题描述

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

I am building a Rails 3.2.11 app with Flot. I want to render my Flot charts in PDFs using Prawn. My Flot charts render in the browser fine. I can create Prawn PDFs fine (though not with chart images yet).

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

I want to use the Flot canvas plugin to render my axes, etc. on the canvas so they are included when I Ajax the image data to the server using the .getCanvas() and .toDataURL() methods, but I can’t seem to get it to work.

我使用的是jquery.flot.min.js 0.8.0和jquery.flot.canvas.min.js（未显示任何版本）。在Chrome控制台中，我看到两个都在加载。

I am using jquery.flot.min.js 0.8.0 and jquery.flot.canvas.min.js (no version indicated). In the Chrome console I see that both are loading.

我的Coffeescript看起来像这样：

My Coffeescript looks like this:

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图表画布，只是没有轴等。我很感激任何建议。谢谢！

I am able to see the Ajax payload and it is indeed the Flot chart canvas, just without the axes, etc. I appreciate any advice. Thanks!

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

Just to be extra clear, code as Javascript looks like this:

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的插件获得了一些奇怪的渲染行为，所以请注意这一点。）

I updated Flot to 0.8.1 and included the jquery.flot.canvas.js file that came in the 0.8.1 .zip archive. (I was getting some strange rendering behavior using plugins from Flot 0.8.0 with jquery.flot.js 0.8.1, so watch out for that.)

现在我的斧头在画布上渲染。大！我要感谢Flot众神！

Now my axes render on the canvas. Great! My thanks to the Flot gods!

推荐答案

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

Your options look okay, assuming (I'm not familiar with CoffeeScript) that last bit is supposed to be missing curly braces.

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

Your Flot version can't be 1.1, though; the latest is 0.8.1, and jquery.flot.canvas.min.js was introduced in 0.8.0. So you're using either the wrong version, or some Flot-derivative that may not support the canvas plugin.

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

Note that the canvas plugin currently only affects the axes; the legend is still rendered in HTML. Complete support for rendering everything on canvas will come in 0.9.

这篇关于如何使用Flot canvas插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！