Label and legend issue in jqplotToImageStr

问题

I am trying to pass a few jqplots to a server and generate pdf. The plots looks good when they are first generated. But when I used jqplotToImageStr to digitize them, they were not properly scaled, and so did the generated pdf. So my question is how to set the plot size/dimension when I digitize these plots.

Commend I used to digitize

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

Before digitize

After

After adding options

回答1:

You can adjust your margins for your axis labels/set z-index using postdrawhooks. Call this just before $.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 pushes the axis labels behind the chart. So I used a canvas to redraw in the order I needed. You will need to of course make changes for the legend. For the axis labels you have to makes sure you use the CanvasAxisLabelRenderer and CanvasAxisTickRenderer and $.jqplot.config.enablePlugins = true;

Code to export image below.

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
                            );
                });
            }
        }
    });

Hope it helps!

回答2:

These are the options which you can specify:

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

I think you can change the x_offset and y_offset to get the expected results you want.

来源：https://stackoverflow.com/questions/19642063/label-and-legend-issue-in-jqplottoimagestr

标签

jquery

jqplot