与JQplot在IE打印问题(Print issue with JQplot on IE)

我想打印我的图表，它通过Firefox和Chrome正常打印。

但是，如果我尝试使用IE打印，它让我看到图形背后的图形画布HTML标签。如u看到的形象。并且也放置在图表轴文本遍布图表.. :(

我尝试下面的解决方案，它说，它解决了问题，但它不力对我来说:(

http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/

下面的问题的屏幕截图。

HTML

    <!doctype html>
    <html lang="en" class="no-js master">
    <head>
    <!-- jQuery Flot Graph Widget.  exCanvas.js needed for IE  -->
 <link class="include" rel="stylesheet" type="text/css" href="/css/jquery.jqplot.css" />
 <!-- End additional plugins --><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/js/excanvas.min.js"></script><![endif]-->
 <script class="include" type="text/javascript" src="/js/jquery.jqplot.min.js"></script>
 <!-- Additional plugins go here -->
 <script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasTextRenderer.min.js"></script>
 <script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
 <script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasAxisTickRenderer.min.js"></script>
 <script class="include" type="text/javascript" src="/js/jqplot/jqplot.categoryAxisRenderer.min.js"></script>
 <script class="include" type="text/javascript" src="/js/jqplot/jqplot.barRenderer.min.js"></script>
    </head>
    <body>
    <div id="mainCont"> </div>
    </body>
    </html>

JSON数据

{
"graphData":[["06-2011",20.0],["07-2011",0.0],["09-2011",0.0],["10-2011",0.0],["11-2011",100.0],["12-2011",0.0],["01-2012",0.0],["02-2012",0.0],["03-2012",0.0],["04-2012",0.0],["05-2012",0.0]], "yAxisLabel" : "Data per month", "graphTitle" : "12 month "}

JS代码

$('.print', context).live("click", function(e) {
    printGraph(data.graphData, data.yAxisLabel, data.graphTitle);
}

function printGraph(graphData, yAxisLabel, graphTitle){
        var graphWrapper = $(document.createElement('div'));
        graphWrapper.attr('id', 'edd-graph').css('width','490px');
        var graphID = graphWrapper.attr('id');


        $('#mainCont').append(graphWrapper);

        var plot = $.jqplot(graphID, [graphData], {
          series:[{renderer:$.jqplot.BarRenderer}],
          seriesDefaults: {shadow: false, 
                           rendererOptions: {barWidth:20}
                          },
          seriesColors: [ "rgba(255, 81, 82, 1)" ],
          axes: {
            xaxis: {
              renderer: $.jqplot.CategoryAxisRenderer,
              label: '',
              labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
              tickRenderer: $.jqplot.CanvasAxisTickRenderer,
              max:90,
              min:10,
              tickOptions: {
                  angle: -45,
                  fontFamily: 'arial',
                  fontSize: '7.2pt'
              }
            },
            yaxis: {
              label: yAxisLabel,
              labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
              labelOptions: {
                  fontFamily: 'arial',
                  fontSize: '8.5pt'
              },
              tickOptions: {
                  fontFamily: 'arial',
                  fontSize: '7.2pt'
              }
            }
          },
          grid: {
            drawGridLines: true,        // wether to draw lines across the grid or not.
            gridLineColor: '#efefef',    // *Color of the grid lines.
            background: '#ffffff',      // CSS color spec for background color of grid.
            borderColor: '#999999',     // CSS color spec for border around grid.
            borderWidth: 0.2,           // pixel width of border around grid.
            shadow: false
            }

        });
    }

Answer 1:

我碰到一个解决方案来为这个恼人的问题。它实际上是在另一个答案挂在计算器上类似的问题。

直接链接到该解决方案是在这里。

我已经验证了它和它的伟大工程。下面是我建，以显示在行动黑客样本。在打开的相应版本的样品IE （设置为IE7或IE8浏览器模式7，8或9），然后尝试打印预览，你会看到其中的差别：