월드버텍 블로그

내일을 향한 준비~~

jqPlot Chart IE Print Error 수정방법

under Web Technical

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();
«
»

Add A Comment

You must be logged in to post a comment.

Subscribe to 월드버텍 블로그