IE8 Problèmes d'impression avec Jqplot

Je suis en train de tester jqplot avec IE8. Lorsque j'ai essayé d'imprimer, les étiquettes des axes étaient décalées. J'ai utilisé Canvashack d'Andrew Bullock comme une solution de contournement. (http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/) Il n'a toujours pas résolu le problème. Je suis nouveau pour les scripts. Y at-il quelque chose qui ne va pas avec mon code? S'il vous plaît aider.IE8 Problèmes d'impression avec Jqplot

Merci, 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>

Source

2010-06-24 Shu A

Vous devez utiliser jQuery 1.4.2

Télécharger le script et remplacer le lien vers 1.3.2 avec 1.4.2.

Theres aussi un bug dans votre code, votre div est appelé "chart1" mais votre script se réfère à "chart4".

corriger ces et votre chant :)

Source

2010-06-24 19:48:47

La solution fournie par Andrew ne fonctionnait pas pour moi. Au lieu de cela, je devais modifier excanvac.js as per, en commentant les lignes suivantes:

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

Dans mon fichier excanvas.js (il y a téléchargé quelques jours de jqplot) il est sur 596 au sujet de 600.

Espérons que cela aide quelqu'un à ne pas avoir à passer par le douloureux processus d'essayer de comprendre cela.

Source

2011-02-04 06:03:11

Il a fait, je vous remercie! –

Cette réponse a bien fonctionné pour moi! J'ai dû combiner à la fois le changement de code excanvas.js et ensuite intégrer le code qui a été posté here d'où la question provenait. Je vais poster ma source ci-dessous qui utilise JQPlot et fonctionne correctement dans IE 7. Ceci est hébergé dans SharePoint, d'où l'enveloppe SOAP contenant la requête CAML.

Voici la mise en page de base:

Fonction contenant le graphique
- appel à la toile fixer
Fin de la fonction contenant le graphique

* Toile fonction Correction

Cherchez tous les points d'exclamation.

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

$ (document) .ready (function() {// Bibliothèques obligatoires: // jquery // jqplot - avec les plugins associés // // json2 REMARQUE "Nom FieldRef" les valeurs sont les noms de colonnes qui peuvent être // extrait d'URL par le tri de la liste des cibles en utilisant ces // colonnes dans 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>

Source

2012-08-09 17:09:52 Chris

IE8 Problèmes d'impression avec Jqplot

Répondre

Questions connexes