0

我在 IE 中打印带有 jqPlot 的页面时遇到问题。我一直在尝试解决这个问题，并且看到了几篇关于修复的帖子；但是，它们并没有解决我的问题。

我已经尝试过 CanvasHack 和对 excanvas.js 的编辑，以注释掉 overlayE1 逻辑（来自这篇文章 - Print issue with JQplot on IE）。从所有的解决方案中，我没有看到任何工作，所以我必须有一个尚未公开的解决方案。

为了说明这个问题，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>
4

1 回答 1

3

免责声明：在IE8浏览器模式下在IE9下测试。这种模式确实存在曲线向左偏移的问题。

当我调试您的代码时，我发现它var canvases = this.find('canvas')...总是返回一个不包含任何内容的 jQuery 对象，尽管要找到几个画布对象。

查看代码，$('body').CanvasHack();实际上并没有在$(document).ready块内执行。我发现移动该调用以使其在创建图表后直接执行似乎可以解决问题。

在上面的代码中，这是：

        });
});
$('body').CanvasHack();

需要是：

        });
    $('body').CanvasHack();
});

我还发现excanvas.js不需要修改 —— 这两种方式似乎都没有什么不同。

于 2013-01-26T03:17:43.870 回答