2
나는 flot으로 만든 차트를 가져 와서 wkhtmltopdf를 사용하여 PDF로 렌더링하려고합니다.wkhtmltopdf는 flot 차트 축만 렌더링합니까?
차트를 포함하는 div 내에서 HTML을 가져 와서 서버로 다시 전달합니다.
PDF에서 실제 차트가 아니라 축 만 표시된다는 것을 알았습니다.
을하지만 wkhtmltopdf 렌더링 같은 이미지는 다음과 같습니다 : 브라우저에서 볼
차트는 다음과 같습니다 
내가 포함 한 FLOT/예 두 템플릿의 /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 }}">
이었다 일단 이것은 단지 일 괜찮 았던 점을 제외하고는 원래 배경색을 잃어버린 것입니다.
감사 느린 응답을 매우 귀하의 답변을 많이하고 죄송합니다. 캔버스 구성 요소로 인해 HTML을 서버로 다시 보내면 도움이되지 않습니다.원래의 질문을 편집하여 내가이 작업을하기 위해 수행 한 작업에 대해 자세히 설명했습니다. 답변 해 주셔서 다시 한 번 감사드립니다. – shearichard