0

いくつかの jqplot をサーバーに渡して pdf を生成しようとしています。プロットは、最初に生成されたときに見栄えがします。しかし、私jqplotToImageStrがそれらをデジタル化していたとき、それらは適切にスケーリングされておらず、生成された pdf も同様でした。したがって、私の質問は、これらのプロットをデジタル化するときにプロット サイズ/寸法を設定する方法です。

デジタル化していたことを褒める

var imgData = [];
imgData.push($('#chart1').jqplotToImageStr({}));

デジタル化前 ここに画像の説明を入力

後 ここに画像の説明を入力

オプション追加後ここに画像の説明を入力

4

3 に答える 3

2

postdrawhooks を使用して、軸ラベルのマージンを調整したり、z-index を設定したりできます。これを $.jqplot の直前に呼び出します。

$.jqplot.postDrawHooks.push(function () {
    $(".jqplot-grid-canvas").css('z-index', '0');
    $(".jqplot-series-canvas").css('z-index', '1');
    $(".jqplot-overlayCanvas-canvas").css('z-index', '2');
    $('.jqplot-yaxis-tick').css('margin-right', '-50px');
    $('.jqplot-yaxis-tick').css('z-index', '3');
});

jqplotToImageStr は、軸ラベルをチャートの後ろに押し込みます。そこで、キャンバスを使用して必要な順序で再描画しました。もちろん、凡例を変更する必要があります。軸ラベルについては、CanvasAxisLabelRenderer と CanvasAxisTickRenderer および $.jqplot.config.enablePlugins = true; を使用していることを確認する必要があります。

以下の画像をエクスポートするコード。

function jqplotToImg(obj) {
    var newCanvas = document.createElement("canvas");
    newCanvas.width = obj.find("canvas.jqplot-base-canvas").width();
    newCanvas.height = obj.find("canvas.jqplot-base-canvas").height();
    var baseOffset = obj.find("canvas.jqplot-base-canvas").offset();

    // make white background for pasting
    var context = newCanvas.getContext("2d");
    context.fillStyle = "rgba(255,255,255,1)";
    context.fillRect(0, 0, newCanvas.width, newCanvas.height);

    obj.children().each(function () {

        if ($(this)[0].tagName.toLowerCase() == 'canvas') {
            // all canvas from the chart
            var offset = $(this).offset();
            newCanvas.getContext("2d").drawImage(this,
                        offset.left - baseOffset.left,
                        offset.top - baseOffset.top
                    );
        } // for the div's with the X and Y axis
    });

    obj.children().each(function () {
        if ($(this)[0].tagName.toLowerCase() == 'div') {
            if ($(this).attr('class') == "jqplot-axis jqplot-yaxis") {

                $(this).children("canvas").each(function () {
                    var offset = $(this).offset();
                    newCanvas.getContext("2d").drawImage(this,
                                offset.left - baseOffset.left,
                                offset.top - baseOffset.top
                            );
                });
            }
            else if ($(this).attr('class') == "jqplot-axis jqplot-xaxis") {

                $(this).children("canvas").each(function () {
                    var offset = $(this).offset();
                    newCanvas.getContext("2d").drawImage(this,
                                offset.left - baseOffset.left,
                                offset.top - baseOffset.top
                            );
                });
            }
        }
    });

それが役に立てば幸い！

于 2013-10-30T08:30:06.513 に答える
0

指定できるオプションは次のとおりです。

var imgData = [];
var options = {
    x_offset : <value>,
    y_offset : <value>,
    backgroundColor : <value>
};
imgData.push($('#chart1').jqplotToImageStr(options));

x_offsetandを変更しy_offsetて、期待される結果を得ることができると思います。

于 2013-10-28T19:45:47.223 に答える