在将jqPlot图形保存到图像文件时隐藏轴标签(Axis label hidden while saving a jqPlot graph to an image file)

在将jqPlot图形保存到图像文件时隐藏轴标签(Axis label hidden while saving a jqPlot graph to an image file)

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

这是创建图像的代码。

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

Edit: I am using jqplotToImageStr({}) to save the chart image. However the resulting image does not include the axis labels. It only outputs the chart itself. I found out that the axis labels are actually behind the chart. I had moved the axis labels inside the chart boundary and set z-index so that the labels are shown on top of the chart. But when jqplotToImageStr({}) is called the axis labels fall behind the chart. How do I make sure that the axis labels are included in the image at time of capture?

here is the code to create the image.

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

最满意答案

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

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

Ok I managed to sort this out. I used a canvas and drew the axis labels on the canvas after drawing the chart. Inspired by 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 ); }); } } });