Problemas de impresión de IE8 con Jqplot

Question

Jun 24, 2010, 09:26 PM

jqplot jquery printing internet-explorer-8

Problemas de impresión de IE8 con Jqplot

Estoy probando jqplot con IE8. Cuando intenté imprimir, las etiquetas de los ejes estaban desplazadas. Usé el Canvashack de Andrew Bullock como solución alternativa.http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/) Todavía no solucionó el problema. Soy nuevo en las secuencias de comandos. ¿Hay algún problema con mi código? Por favor ayuda.

Gracias 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>