Flot 刻度标签在 .toDataURL() 导出中未正确显示

Question

我正在使用 Flot 版本 0.8.3 来显示多种类型的图表。我为用户提供了使用 .toDataURL('img/png') 从 Canvas 导出图表的选项。

导出的图像未显示刻度轴标签。我最终发现这是因为标签是在 html 中呈现的，而不是在 Canvas 上。因此，我在导出之前添加了 jquery.flot.canvas.js 并设置了 options.canvas = true。标签现在出现在导出的图像中，但 x 轴刻度标签相互重叠。

然后我添加了 jquery.flot.tickrotor.js 并设置 options.xaxis.rotateTicks = 135 来旋转标签。标签仍然出现在导出的图像中，并且它们被正确旋转，但它们已经失去了字体大小，看起来比其他文本小得多，并且 x 轴刻度从网格中消失了。 (我用 options.xaxis.font.size = 24 设置了字体，与我在 Canvas 中给所有文本的字体大小相同。)

我需要做什么才能在导出的图像中包含刻度标签而不重叠，如果旋转，字体大小是否正确？

Answer 1

这里有两个问题:

(1) 首先，旋转的刻度标签文本很小。我最初使用 xaxis.font 设置刻度标签字体，jquery.flot.tickrotor.js 忽略了它。如 the plugin's README 中所述，改为在 xaxis.rotateTicksFont 选项中声明字体。

(2) 其次，旋转刻度标签时，垂直刻度线会消失。正如 Mark 在评论中指出的那样，这是由于 jquery.flot.tickrotor.js 第 77 行的一个错误:opts.ticks = [];。 ( A bug report has been filed. )

与此同时，在错误得到解决之前，为了解决这个问题，我已经修补了 jquery.flot.js 如下:

/jquery.flot.js
Index: assets/javascript/lib/jquery/plugins/flot/jquery.flot.js
===================================================================
--- assets/javascript/lib/jquery/plugins/flot/jquery.flot.js    (revision 13829)
+++ assets/javascript/lib/jquery/plugins/flot/jquery.flot.js    (working copy)
@@ -2030,8 +2030,9 @@

             for (var j = 0; j < axes.length; ++j) {
                 var axis = axes[j], box = axis.box,
-                    t = axis.tickLength, x, y, xoff, yoff;
-                if (!axis.show || axis.ticks.length == 0)
+                    t = axis.tickLength, x, y, xoff, yoff,
+                    rTicks = axis.rotatedTicks || axis.ticks;
+                if (!axis.show || rTicks.length == 0)
                     continue;

                 ctx.lineWidth = 1;
@@ -2080,8 +2081,8 @@
                 ctx.strokeStyle = axis.options.tickColor;

                 ctx.beginPath();
-                for (i = 0; i < axis.ticks.length; ++i) {
-                    var v = axis.ticks[i].v;
+                for (i = 0; i < rTicks.length; ++i) {
+                    var v = rTicks[i].v;

                     xoff = yoff = 0;

问题已解决。