0

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>
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 に答える