RGraphとIE8。印刷したい。

RGraphはInternet Explorer 8でもexplorercanvasを使ってグラフを表示してくれますが、

印刷すると真っ白で画面のような出力を得られません。

そこで、IE用Canvas互換機能のライブラリをuuCanvas.jsに変更して印刷をできるようにしてみます。





まず、RGraphとuuCancasをダウンロードします。

それぞれのzipを解凍し、uuCanvas.jsをRGraphの適当なフォルダに入れておきます。

ここではexamplesフォルダのrose.htmlをuuCanvas対応にしてみます。

まず、rose.htmlのexcanvas.jsを読み込んでいるところ↓を、

    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->

さきほど配置したuuCanvas.jsに変更します↓。

    <!--[if IE 8]><script src="../excanvas/uuCanvas.js"></script><![endif]-->

次に、起動をonload↓から、

<script>
        window.onload = function ()
        {            

uuCanvas.jsのxcanvasに変更します。xcanvasはCanvasの準備が整ったときにuuCanvasが実行してくれます。

<script>
        window.xcanvas = function ()
        {            

これらの変更で、

無事に表示されました。ただ、文字が少し下にずれるのでRGraphのlibrariesフォルダにあるRGraph.common.core.jsを微調整をします。修正は3箇所。文字を上にずらし、文字を囲う枠をずらして、背景の塗り潰しもずらしています。

--- RGraph.common.core.orig.js
+++ RGraph.common.core.js
@@ -304,10 +304,13 @@
             if (arguments[9]) {
                 context.rotate(arguments[9] / 57.3);
             }
 
             // Vertical alignment - defaults to bottom
+            if (RGraph.isIE8()) {
+                context.translate(0, - size / 2);
+            }
             if (arguments[6]) {
                 var vAlign = arguments[6];
 
                 if (vAlign == 'center') {
                     context.translate(0, size / 2);
@@ -342,22 +345,22 @@
                  context.lineWidth = 0.5;
                 
                 if (arguments[8]) {
 
                     var width = context.measureText(text).width;
-                    var ieOffset = RGraph.isIE8() ? 2 : 0;
+                    var ieOffset = RGraph.isIE8() ? -5 : 0;
 
                     context.translate(x, y);
                     context.strokeRect(0 - 3, 0 - 3 - size - ieOffset, width + 6, 0 + size + 6);
     
                     /**
                     * If requested, draw a background for the text
                     */
                     if (arguments[10]) {
         
                         var offset = 3;
-                        var ieOffset = RGraph.isIE8() ? 2 : 0;
+                        var ieOffset = RGraph.isIE8() ? -5 : 0;
                         var width = context.measureText(text).width
 
                         //context.strokeStyle = 'gray';
                         context.fillStyle = arguments[10];
                         context.fillRect(x - offset, y - size - offset - ieOffset, width + (2 * offset), size + (2 * offset));

これで画面での表示も、

印刷もうまくいくようになりました。

グリッドの同心円が印刷されていませんが、細かいところは気にしないことに。