我正在尝试将一些 jqplots 传递给服务器并生成 pdf。这些图在第一次生成时看起来不错。但是当我过去jqplotToImageStr将它们数字化时，它们没有正确缩放，生成的 pdf 也是如此。所以我的问题是当我数字化这些图时如何设置图的大小/尺寸。
称赞我曾经数字化
var imgData = [];
imgData.push($('#chart1').jqplotToImageStr({}));
数字化之前
后
添加选项后
3052 次
3 回答
2
您可以使用 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
);
});
}
}
});
希望能帮助到你！
于 2013-10-30T08:30:06.513 回答
0
这些是您可以指定的选项：
var imgData = [];
var options = {
x_offset : <value>,
y_offset : <value>,
backgroundColor : <value>
};
imgData.push($('#chart1').jqplotToImageStr(options));
我认为您可以更改x_offsetandy_offset以获得您想要的预期结果。
于 2013-10-28T19:45:47.223 回答