flot で作成されたチャートを取得し、wkhtmltopdf を使用して PDF にレンダリングしようとしています。
そのために、チャートを含む div 内の HTML を取得し、それをサーバーに返します。
PDFでは、実際のチャートではなく、軸のみが表示されていることがわかりました。
ブラウザで見ると、グラフは次のようになります。
しかし、同じ画像を wkhtmltopdf でレンダリングすると、次のようになります。
両方のテンプレートに flot/examples/examples.css を含めました。
wkhtmltopdf に渡される HTML は次のようになります。
<body>
<h2>Incidents per 100 Workers</h2>
<p>This is the test output</p>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder">
<canvas height="450" width="850" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 850px; height: 450px;" class="flot-base"></canvas><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);" class="flot-text"><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;" class="flot-x-axis flot-x1-axis xAxis x1Axis"><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 23px; text-align: center;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 144px; text-align: center;">2</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 265px; text-align: center;">4</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 386px; text-align: center;">6</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 507px; text-align: center;">8</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 624px; text-align: center;">10</div><div class="flot-tick-label tickLabel" style="position: absolute; max-width: 106px; top: 431px; left: 745px; text-align: center;">12</div></div><div style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;" class="flot-y-axis flot-y1-axis yAxis y1Axis"><div class="flot-tick-label tickLabel" style="position: absolute; top: 418px; left: 2px; text-align: right;">-1.5</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 348px; left: 2px; text-align: right;">-1.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 279px; left: 2px; text-align: right;">-0.5</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 209px; left: 6px; text-align: right;">0.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 140px; left: 6px; text-align: right;">0.5</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 70px; left: 6px; text-align: right;">1.0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 1px; left: 6px; text-align: right;">1.5</div></div></div><canvas height="450" width="850" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 850px; height: 450px;" class="flot-overlay"></canvas>
</div>
</div>
</div>
</body>
</html>
これを引き起こす可能性のあるアイデアはありますか？
ありがとう
答え ！
以下の Ryley が述べたように、HTML をサーバーに送り返すだけでは、ほとんどのチャートが「書き込まれる」キャンバスが失われるため、十分ではありません。
代わりに私はこれをしました：
//fplotChart is the value returned by calling
//the fPlot .plot() function
var fplotChartCanvas = fplotChart.getCanvas();
valueToSubmitToServer = fplotChartCanvas.toDataURL();
そして、値がサーバーに戻ったら、IMG要素の「src」として「valueToSubmitToServer」を使用しました
<img id="chart1" src="{{ pdf_inject_canvas_url }}">
元の背景色が失われたことを除けば、これはうまく機能しました。