jqPlotが含まれているIEでのページの印刷に問題があります。私はしばらくの間これを解決しようとしていて、修正について話すいくつかの投稿を見てきました。しかし、彼らは私の問題を解決しません。
CanvasHackとexcanvas.jsの編集の両方でoverlayE1ロジックをコメントアウトしようとしました(この投稿から-IEでのJQplotの印刷の問題)。すべての解決策から、私は何も機能しないのを見たので、公表されていない解決策がそこにあるに違いありません。
問題を述べると、jqPlotはすべてのブラウザ(IE、Chrome、Firefox)で正しいです。ただし、印刷プレビューまたは印刷(PDFまたはプリンター)を実行すると、一部のdivがシフトします。効果があるように見える
以下は私のHTMLです。
<!DOCTYPE HTML>
<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="dist/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="dist/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="dist/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="dist/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="dist/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/jquery.jqplot.css" />
<script language="javascript" type="text/javascript">
(function($) {
$.fn.CanvasHack = function() {
var canvases = this.find('canvas').filter(function() {
return $(this).css('position') == 'absolute';
});
canvases.wrap(function() {
var canvas = $(this);
var div = $('<div />').css({
position: 'absolute',
top: canvas.css('top'),
left: canvas.css('left')
});
canvas.css({
top: '0',
left: '0'
});
return div;
});
return this;
};
})(jQuery);
</script>
</head>
<body>
<div id="displaysection" style="width:400px;height:400px;"></div>
<script>
$.jqplot.config.enablePlugins = true;
$(document).ready(function () {
var sinPoints = [];
for (var i=0; i<2*Math.PI; i+=0.1){
sinPoints.push([i, 2*Math.sin(i-.8)]);
}
plot = $.jqplot("displaysection", [sinPoints], {
title: {
text: "Title",
textAlign: "center",
fontSize: 20
},
legend: {
show: false
},
axes: {
xaxis: {
label: "x-Axis",
min: 0//,
//labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis: {
label: "y-Axis"//,
//labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
highlighter: {
show: true,
sizeAdjust: 3
},
cursor: {
show: true,
tooltipLocation:"nw",
zoom:true
},
seriesDefaults:{
showMarker: false,
showLine:true,
showLabel: true,
shadow: false,
lineWidth:3
},
series:[
{
label: "Sin Curve",
color: "purple"
}
]
});
});
$('body').CanvasHack();
</script>
</body>
</html>