jqplotToImageStr中的标签和图例问题 [英] Label and legend issue in jqplotToImageStr

问题描述

我正在尝试将一些jqplots传递给服务器并生成pdf.首次生成图时看起来不错.但是，当我使用jqplotToImageStr将它们数字化时，它们的缩放比例不正确，生成的pdf也是如此.所以我的问题是当我将这些图数字化时如何设置图的大小/尺寸.

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.

我曾经数字化的建议

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

在数字化之前

之后

添加选项后

推荐答案

您可以使用postdrawhooks来调整轴标签/设置z-index的边距.在$ .jqplot之前调用它.

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将轴标签推到图表后面.所以我用画布按需要的顺序重画.您当然需要对图例进行更改.对于轴标签，必须确保使用CanvasAxisLabelRenderer和CanvasAxisTickRenderer以及$ .jqplot.config.enablePlugins = true;

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

希望有帮助！

这篇关于jqplotToImageStr中的标签和图例问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！