我的图表显示在页面上，但当我打印该页面时却没有。
html(打印时检查元素):
<div class="stat1">
<div class="block">
<div class="head"></div>
<br>
<div class="data">
<div id="chart-2" style="padding: 0px; position: relative;"><canvas class="base" width="980" height="882"></canvas><canvas class="overlay" width="980" height="882" style="position: absolute; left: 0px; top: 0px;"></canvas><div class="tickLabels" style="font-size:smaller"><div class="xAxis x1Axis" style="color:whitesmoke"><div class="tickLabel" style="position:absolute;text-align:center;left:-24px;top:862px;width:122px">0.0</div><div class="tickLabel" style="position:absolute;text-align:center;left:110px;top:862px;width:122px">0.5</div><div class="tickLabel" style="position:absolute;text-align:center;left:244px;top:862px;width:122px">1.0</div><div class="tickLabel" style="position:absolute;text-align:center;left:378px;top:862px;width:122px">1.5</div><div class="tickLabel" style="position:absolute;text-align:center;left:512px;top:862px;width:122px">2.0</div><div class="tickLabel" style="position:absolute;text-align:center;left:646px;top:862px;width:122px">2.5</div><div class="tickLabel" style="position:absolute;text-align:center;left:780px;top:862px;width:122px">3.0</div><div class="tickLabel" style="position:absolute;text-align:center;left:914px;top:862px;width:122px">3.5</div></div><div class="yAxis y1Axis" style="color:#3f3f3f"><div class="tickLabel" style="position:absolute;text-align:right;top:847px;right:948px;width:32px">0</div><div class="tickLabel" style="position:absolute;text-align:right;top:762px;right:948px;width:32px">10</div><div class="tickLabel" style="position:absolute;text-align:right;top:677px;right:948px;width:32px">20</div><div class="tickLabel" style="position:absolute;text-align:right;top:591px;right:948px;width:32px">30</div><div class="tickLabel" style="position:absolute;text-align:right;top:506px;right:948px;width:32px">40</div><div class="tickLabel" style="position:absolute;text-align:right;top:421px;right:948px;width:32px">50</div><div class="tickLabel" style="position:absolute;text-align:right;top:336px;right:948px;width:32px">60</div><div class="tickLabel" style="position:absolute;text-align:right;top:251px;right:948px;width:32px">70</div><div class="tickLabel" style="position:absolute;text-align:right;top:165px;right:948px;width:32px">80</div><div class="tickLabel" style="position:absolute;text-align:right;top:80px;right:948px;width:32px">90</div><div class="tickLabel" style="position:absolute;text-align:right;top:-5px;right:948px;width:32px">100</div></div></div><div class="legend"><div style="position: absolute; width: 444px; height: 22px; top: -20px; right: 0px; opacity: 1;"> </div><table style="position:absolute;top:-20px;right:0px;;font-size: 11px; color:#3f3f3f"><tbody><tr><td class="legendColorBox"><div style="#DDD"><div style="width:15px;height:0;border:3px solid #4B8863;overflow:hidden"></div></div></td><td class="legendLabel"><span>1-15 Age(26.9%)</span></td><td class="legendColorBox"><div style="#DDD"><div style="width:15px;height:0;border:3px solid #648DA0;overflow:hidden"></div></div></td><td class="legendLabel"><span>16-30 Age(38.5%)</span></td><td class="legendColorBox"><div style="#DDD"><div style="width:15px;height:0;border:3px solid #A0927E;overflow:hidden"></div></div></td><td class="legendLabel"><span>31-50 Age(11.5%)</span></td><td class="legendColorBox"><div style="#DDD"><div style="width:15px;height:0;border:3px solid #757B7C;overflow:hidden"></div></div></td><td class="legendLabel"><span>50+ Age(23.1%)</span></td></tr></tbody></table></div></div>
</div>
</div>
<p id="pstyle">1-15 16-30 31-50 51+</p>
</div>
html(在页面中):
<div class="stat1">
<div class="block">
<div class="head"></div>
<br>
<div class="data">
<div id="chart-2"></div>
</div>
</div>
<p id="pstyle">1-15                                  16-30                                 31-50                                  51+</p>
</div>
打印函数:
w=window.open('','printview');
w.document.write('\x3Cscript type="text/javascript" src="../../js/plugins/jflot/jquery.flot.js">\x3C/script>');
w.document.write('\x3Cscript type="text/javascript" src="../../js/plugins/jflot/jquery.flot.resize.js">\x3C/script>');
w.document.write("<link rel='stylesheet' type='text/css' href='../../Extra/Reports Pages/Print.css'>");
w.print();
打印 css:
#chart-2
{
height: 900px !important;
width: 982px !important;
}
#pstyle
{
margin-top: 0px;
margin-left: 41px;
position: absolute;
}
.block
{
background: whitesmoke;
width: 599px;
}
.stat1
{
height: 300px;
}
.base
{
width: 1047px;
height: 793px;
z-index: 1;
margin-top: -793px;
}
.overlay
{
position: absolute;
left: 0px;
top: 0px;
}
.tickLabels
{
font-size:smaller;
}
也许 java 脚本文件没有到达打印页面。 Canvas 存在于检查元素中仍然看不到图形。
最佳答案
这对我有帮助。
将 html Canvas 中显示的内容捕获为图像。
var canvas = document.getElementById("mycanvas");
or
var canvas = $('#mycanvas')[0];
var img = canvas.toDataURL("image/png");
使用 IMG 中的值，您可以像这样将其作为新图像写出:
document.write('<img src="'+img+'"/>');
关于javascript - 图形未显示在打印 Flot.js 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23511600/