jqplotToImageStr中的标签和图例问题

我试图将一些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推动图表后面的轴标签。 所以我用canvas按照我需要的顺序重绘。 您当然需要对图例进行更改。 对于轴标签，您必须确保使用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 : , y_offset : , backgroundColor :  }; imgData.push($('#chart1').jqplotToImageStr(options)); 

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