Jqplot 的 IE8 打印问题答案

【问题标题】：IE8 Printing issues with JqplotJqplot 的 IE8 打印问题
【发布时间】：2011-03-07 23:53:03
【问题描述】：

我正在用 IE8 测试 jqplot。当我尝试打印时，轴标签偏移了。我使用 Andrew Bullock 的 Canvashack 作为解决方法。(http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/) 它仍然没有解决问题。我是脚本新手。我的代码有什么问题吗？请帮忙。

谢谢，舒

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

【问题讨论】：

标签： jquery printing internet-explorer-8 jqplot

【解决方案1】：

Andrew 提供的解决方案对我不起作用。相反，我不得不修改 excanvac.js as per，注释掉以下几行：

//var overlayEl = el.cloneNode(false);
// Use a non transparent background.
//overlayEl.style.backgroundColor = 'red';
//overlayEl.style.filter = 'alpha(opacity=0)';
//canvasElement.appendChild(overlayEl);

在我的 excanvas.js 文件（几天前从 jqplot 下载）中，它大约在 596 到 600 之间。

希望这对某人有所帮助，这样他们就不必经历试图弄清楚这一点的痛苦过程。

【讨论】：

【解决方案2】：

这个答案对我很有用！我必须将 excanvas.js 代码更改结合起来，然后集成问题所在here 发布的代码。我将在下面发布我的源代码，它使用 JQPlot 并在 IE 7 中正确运行。它托管在 SharePoint 中，因此包含 CAML 查询的 SOAP 信封。

这是基本布局：

包含图表的函数
- 调用画布修复
包含图表的函数结束

*画布修复功能

查找所有的感叹号。

<script language="javascript" src="/code_lib/excanvas.js" type="text/javascript"></script><script language="javascript" src="/code_lib/jquery-1.7.2.js" type="text/javascript"></script><script language="javascript" src="/code_lib/jquery.jqplot.min.js" type="text/javascript"></script><script language="javascript" src="/code_lib/plugins/jqplot.barRenderer.min.js" type="text/javascript"></script><script language="javascript" src="/code_lib/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script><script language="javascript" src="/code_lib/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script><link href="/code_lib/jquery.jqplot.css" type="text/css" rel="stylesheet"/><script language="javascript" src="/code_lib/json2.js" type="text/javascript"></script><script language="javascript" src="/code_lib/jkl-parsexml.js" type="text/javascript"></script><script language="javascript" type="text/javascript">

$(文档).ready(函数() { //需要的库： //jQuery //jqplot - 连同相关的插件 //json2 //注意“FieldRef Name”值是列名，可以 //通过使用这些对目标列表进行排序，从 URL 中提取 //SharePoint 中的列

    var soapEnv =
        "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
            <soapenv:Body> \
                 <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                    <listName>Produce</listName> \
                        <ViewFields> \
                           <FieldRef Name='Quantity' /> \
                           <FieldRef Name='Quantity2' /> \
                       </ViewFields> \
                </GetListItems> \
            </soapenv:Body> \
        </soapenv:Envelope>";
    $.ajax({
        //Use an ABSOLUTE reference to your target webservice
        url: "http://mydomain/Sandbox/bitest/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=\"utf-8\"",
        async: false //HORRIBLE idea, but only way it works in SP
    });

//BEGIN JQPLOT SECTION
//http://www.jqplot.com/
//Graph will render with below data
//NOTE REGARDING GRAPH DATA:
//All data input must be properly formatted JSON. Convert JScript array to
//JSON using json2.js library (JSONString = JSON.stringify(targetarray)).
//NEXT convery JSON string object to JSON array by using parse method:
//GraphArray = JSON.parse(JSONString) - use the string generated above.
//This new 'GraphArray' array can be passed into JQPlot as a chart series.
//json2.js library URL:
//https://github.com/douglascrockford/JSON-js/
//Regarding JSON Support in IE7: JSON stringify support does not exist
//hence the need to download and utilize the above library.

s1 = jsonArray;
s2 = jsonArray2;
// Clear the existing chart so that the data can be refreshed
// Other methods of doing this may be more efficient.
// RENAME THE TARGET DIV IF YOU REUSE THIS CODE!
// And remember to make the target div in the first place (see end of code)
jQuery('#chart1').empty(); 
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['Sum Quantity 1', 'Sum Quantity 2', 'Sum Quantity 3'];
    var plot1 = $.jqplot('chart1', [s1, s2], {
    // The "seriesDefaults" option is an options object that will
    // be applied to all series in the chart.
    seriesDefaults:{
        //dataRenderer: barRenderer,
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: true}
    },
    // Custom labels for the series are specified with the "label"
    // option on the series option.  Here a series option object
    // is specified for each series.
    series:[
        {label:'Sum Quantity 1'},
        {label:'Sum Quantity 2'},
        {label:'Sum Quantity 3'},
    ],
    // Show the legend and put it outside the grid, but inside the
    // plot container, shrinking the grid to accomodate the legend.
    // A value of "outside" would not shrink the grid and allow
    // the legend to overflow the container.
    legend: {
        show: true,
        placement: 'outsideGrid'
    },
    axes: {
        // Use a category axis on the x axis and use our custom ticks.
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        // Pad the y axis just a little so bars can get close to, but
        // not touch, the grid boundaries.  1.2 is the default padding.
        yaxis: {
            pad: 1.05,
            tickOptions: {formatString: '$%d'}
        }
    }
});
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!----------------------
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!----------------------
        //NOTE: This is the call to the print position fix
   $('body').CanvasHack();
});

//This function is intended to "fix" the positioning of graphs on print
(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);

function processResult(xData, status) {
        quantityOne = 0;
        quantityTwo = 0;
        quantityOneArray = [];
        quantityTwoArray = [];
        i=0;
        //Utilize asmx webservice to return list as XML
        //This routine can be modified to match the data structure
        //of that XML file.
        //The initial SOAP request returns the XML version of the list.
        //Utilize the below structure to access ALL xml data from the list:
        //{SITEURL}/_vti_bin/owssvr.dll?Cmd=Display&List={GUID}&XMLDATA=TRUE&Query=*
        $(xData.responseXML).find("z\\:row").each(function() {
           quantityOne += parseFloat($(this).attr("ows_Quantity"));
           quantityTwo += parseFloat($(this).attr("ows_Quantity2"));
           quantityOneArray[i] = parseFloat($(this).attr("ows_Quantity"));
           quantityTwoArray[i] = parseFloat($(this).attr("ows_Quantity2"));
           //JSON CONVERSION OCCURS BELOW
           jsonString = JSON.stringify(quantityOneArray);
           jsonString2 = JSON.stringify(quantityTwoArray);
           jsonArray = JSON.parse(jsonString);
           jsonArray2 = JSON.parse(jsonString2);
           i++;
    });
}</script>
<div class="jqplot-target" id="chart1" style="width: 400px; position: relative; height: 400px"></div>

【讨论】：

【解决方案3】：

你需要使用jQuery 1.4.2

下载脚本并将1.3.2的链接替换为1.4.2。

您的代码中还有一个错误，您的 div 称为“chart1”，但您的脚本引用了“chart4”。

修复这些和你的歌声:)

【讨论】：