1

使用可能な幅に収まるように構成された JavaScript レンダラーを使用して、いくつかのプロットを生成しています。関連するコードは次のようになります。

<div id="sales-plot">Loading...</div>

#sales-plot{
    width: 30%;
    height: 275px;
}


FusionCharts.setCurrentRenderer("javascript");
var salesPlot = null;
$("#sales-plot").each(function(){
    salesPlot = new FusionCharts("/js/FusionCharts/Pie2D.swf",
                                 "fc-" + this.id, "100%", "100%", debugMode);
    salesPlot.setJSONUrl("/data/sales-plot.json";);
    salesPlot.render(this.id);
});

ここまでは順調ですね。ユーザーがページを印刷するときに問題が発生します。プロットは、A4 シートで使用可能な幅の 2 倍になります。印刷用の CSS コードを微調整しようとしましたが、壁にぶつかりました。どうやら、FusionCharts はグラフのピクセル寸法を計算してハードコーディングしているようです。

<svg height="275" version="1.1" width="379" xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none; cursor: default; position: relative;
background-color: rgb(255, 255, 255);">

CSS を使用して<svg>要素またはその祖先の幅を縮小すると、切り取られたグラフしか得られません。

@media print{
    #sales-plot{
        width: 5cm;
        height: 3cm;
    }
}

グラフは元のサイズを維持するため、コンテナーからオーバーフローします。FusionChart は、ウィンドウのサイズを変更するとグラフのサイズを変更しますが、印刷するときは明らかにそうではありません。

これは簡単に修正できますか？

編集: SVG グラフィック スケールを外側のコンテナーに合わせて作成する方法について Google で検索し、そのような変更を行うための JavaScript ハックを作成しました。

function handleDrawComplete(eventObject, argumentsObject){
    var $svg = $("svg", eventObject.sender.ref);
    var w = argumentsObject.width;
    var h = argumentsObject.height;

    $svg
        .attr("viewBox", "0 0 " + w + " " + h)
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("width", "100%")
        .attr("height", "100%");
    $svg[0].clientWidth = 5000;
    $svg[0].width = 5000;
    $svg[0].pixelUnitToMillimeterX = 0.8;
}

おもしろいことに、ブラウザー開発者ツールを使用して生成されたコードを静的な HTML ページにコピーし、グラフを正しい寸法で印刷できますが、動的に生成されたグラフは CSS 印刷規則を完全に無視します。私はコードをいじって作成しましたが、これは私の Windows 7 コンピューターでどのように見えるかです (スクリーンショットは Firefox 22 のもので、50% にリサンプリングされています。他のすべてのブラウザーは同じ動作を示します)。

画面

画面

印刷する

(生成された A4 PDF)

印刷する

4

0 に答える 0