2

Flot を使用して Rails 3.2.11 アプリを作成しています。Prawn を使用して Flot チャートを PDF にレンダリングしたいと考えています。私の Flot チャートはブラウザで正常に表示されます。エビのPDFをうまく作成できます（ただし、チャート画像はまだありません）。

Flot キャンバス プラグインを使用して軸などをキャンバスにレンダリングしたいので、.getCanvas()および.toDataURL()メソッドを使用して画像データをサーバーに Ajax するときにそれらが含まれるようにしますが、見えませんそれを機能させるために。

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 ファイルを含めました。(jquery.flot.js 0.8.1 で Flot 0.8.0 のプラグインを使用すると、奇妙なレンダリング動作が発生していたので、注意してください。)

これで、軸がキャンバスにレンダリングされます。すごい！フロットの神々に感謝します！

4

1 に答える 1

1

あなたのオプションは問題ないように見えますが (私は CoffeeScript に詳しくありません)、最後のビットに中括弧がないと想定されています。

ただし、Flot のバージョンを 1.1 にすることはできません。最新は 0.8.1 で、jquery.flot.canvas.min.js は 0.8.0 で導入されました。したがって、間違ったバージョンを使用しているか、キャンバス プラグインをサポートしていない可能性のある Flot 派生物を使用しています。

キャンバス プラグインは現在、軸にのみ影響することに注意してください。凡例は引き続き HTML でレンダリングされます。キャンバス上のすべてをレンダリングするための完全なサポートは、0.9 で提供されます。

于 2013-05-23T20:47:44.800 に答える