Flot刻度标签在.toDataURL（）导出中无法正确显示

Question

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

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

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

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

Answer 1

这里有两个问题：

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

（2）其次，当旋转刻度标签时，垂直刻度线会消失。正如Mark在评论中指出的那样，这是由于 jquery.flot.tickrotor.js ：opts.ticks = [];第77行的错误。 （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;

问题解决了。