Question

编辑：我正在使用jqplotToImageStr（{}）来保存图表图像。但是，生成的图像不包括轴标签。它只输出图表本身。我发现轴标签实际上在图表后面。我已将轴标签移动到图表边界内并设置z-index，以便标签显示在图表的顶部。但是当调用jqplotToImageStr（{}）时，轴标签落后于图表。如何在捕获时确保轴标签包含在图像中？

这是创建图像的代码。

var imageData = $('#chart_div').jqplotToImageStr({});
var copyImage = $('<img/>').attr('src', imageData);
$('#copy-container').html(copyImage);

Answer 1

好的，我设法解决了这个问题。在绘制图表后，我使用了画布并在画布上绘制了轴标签。灵感来自this post。

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

在将jqPlot图形保存到图像文件时隐藏轴标签

1 个答案: