IE8 Problemas de impressão no Jqplot

Question

Jun 24, 2010, 09:26 PM

internet-explorer-8 jqplot jquery printing

IE8 Problemas de impressão no Jqplot

Estou testando o jqplot com o IE8. Quando tentei imprimir, as etiquetas dos eixos estavam deslocadas. Usei o Canvashack de Andrew Bullock como solução alternativa.http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/) Ainda não corrigiu o problema. Eu sou novo em scripts. Há algo de errado com o meu código? Por favor ajude.

Obrigado Shu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!--[if IE]><script language="javascript" type="text/javascript" src="jqplot/dist/excanvas.min.js"></script><![endif]-->
  <link rel="stylesheet" type="text/css" href="jqplot/dist/jquery.jqplot.css" />

  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="jqplot/dist/jquery-1.3.2.min.js"></script>
  <!-- END: load jquery -->

  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="jqplot/dist/jquery.jqplot.min.js"></script>
  <script type="text/javascript" src="jqplot/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
  <script type="text/javascript" src="jqplot/dist/plugins/jqplot.categoryAxisRenderer.min.js"></script>

   <!-- END: load jqplot -->
 <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 class="jqPlot" id="chart1" style="height:320px; width:540px;"></div>
    <script language="javascript" type="text/javascript">
  line1=[[1,1], [1.5, 2.25], [2,4], [2.5,6.25], [3,9], [3.5,12.25], [4,16]];
  line2=[25, 12.5, 6.25, 3.125];
  xticks = [[0, 'zero'], [1, 'one'], [2, 'two'], [3, 'three'], [4, 'four'], [5, 'five']];
  yticks = [-5, 0, 5, 10, 15, 20, 25, 30];
  plot4 = $.jqplot('chart4', [line1, line2], {
   legend:{show:true}, 
   title:'Customized Axes Ticks',
   grid: {background:'#f3f3f3', gridLineColor:'#accf9b'},
   series:[
    {label:'Rising line', markerOptions:{style:'square'}}, 
    {label:'Declining line'}
   ],
   axes:{
    xaxis:{rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
        ticks:xticks, tickOptions:{angle: -30}
    }, 

    yaxis:{rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
      ticks:yticks, tickOptions:{formatString:'%d', angle: -30}
    }
   }
  });
 $('body').CanvasHack();
    </script>

  </body>
</html>

leaveComments