IE8使用Jqplot打印問題

我正在使用IE8測試jqplot。當我嘗試打印時，軸標籤被偏移。我用Andrew Bullock的Canvashack作爲解決方法。（http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/）它仍然沒有解決問題。我不熟悉腳本。我的代碼有什麼問題嗎？請幫忙。IE8使用Jqplot打印問題

感謝，舒

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

來源

2010-06-24 Shu A

您需要使用jQuery 1.4.2

下載腳本，並與1.4.2更換鏈接1.3.2。

Theres也是你代碼中的一個bug，你的div被稱爲「chart1」，但你的腳本引用「chart4」。

修復這些和你的唱歌:)

來源

2010-06-24 19:48:47

安德魯提供的解決方案並不適合我。相反，我不得不修改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

希望這可以幫助別人，這樣他們就不必經歷試圖弄清楚這一點的痛苦過程。

來源

2011-02-04 06:03:11

它沒有，謝謝你的目標列表 //從URL中提取！ – 2012-10-29 21:43:18

這個答案對我很好！我必須結合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">

$（文件）。就緒（函數（）{// 所需的庫： // jQuery的 // jqplot - 連同相關的插件 // json2 //注意「FieldRef名稱」值的列名，可以是通過排序使用這些 //列在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>

來源

2012-08-09 17:09:52 Chris

IE8使用Jqplot打印問題

回答

相關問題