如何使用Flot canvas插件

本文介绍了如何使用Flot canvas插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在用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!

Flot

如何使用Flot canvas插件

问题描述

推荐答案