jqPlot Chart IE Print Error 수정방법
jqPlot 그래프가 이쁘장한것이 좋아요. 그런데 IE에서 프린트하면, 좌측으로 쏠리는것과 그래프자체가 안나오는 버그가 있네요.
1. 좌측으로 쏠리는것 수정방법
#!Javascript //var overlayEl = el.cloneNode(false); // Use a non transparent background. //overlayEl.style.backgroundColor = 'red'; //overlayEl.style.filter = 'alpha(opacity=0)'; //canvasElement.appendChild(overlayEl);
참조 : https://bitbucket.org/cleonello/jqplot/issue/268/blank-chart-when-print-ie
2. 인쇄시 검정색으로 나오는것 수정방법
http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/Getting position: absolute canvas elements to print correctly in IE
It seems IE doesn’t print canvas elements which are absolutely positioned in the correct place. What a surprise.
This problem came about when i tried to print some of my jqPlot graphs, as it uses absolutely positioned canvas tags for the data and axes.
There’s probably a much easier solution to this, but i couldn’t find it.
Heres some mega-hax that makes things work:
Update: This requires jQuery 1.4.2+
01.(function($) { 02. $.fn.CanvasHack = function() { 03. var canvases = this.find('canvas').filter(function() { 04. return $(this).css('position') == 'absolute'; 05. }); 06. 07. canvases.wrap(function() { 08. var canvas = $(this); 09. var div = $('<div />').css({ 10. position: 'absolute', 11. top: canvas.css('top'), 12. left: canvas.css('left') 13. }); 14. canvas.css({ 15. top: '0', 16. left: '0'17. }); 18. return div; 19. }); 20. 21. return this; 22. }; 23.})(jQuery);Call it after your graph setup code, like this:
1.$('body').CanvasHack();