jqplotToImageStr中的标签和图例问题

Question

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

推荐我曾经数字化

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

数字化之前

在

添加选项

后

Answer 1

您可以使用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
                            );
                });
            }
        }
    });

希望它有所帮助！

Answer 2

您可以指定以下选项：

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

我认为您可以更改x_offset和y_offset以获得所需的预期结果。

Answer 3

碰到了这一点-在某些浏览器中尺寸/缩放错误...。 使用最新的铬，您可以在打开开发工具时看到它（铬：79.0.3945.117）

您可以验证here: 或查看GitHub问题here：