在画布上绘制轴标签位置

Question

我正在使用Flot 0.8.1构建一个Rails 3.2.11应用程序.我想用Prawn在PDF中渲染我的Flot图表.(我将使用.getCanvas和.toDataURL方法将图像数据Ajax到服务器.)我的Flot图表在浏览器中渲染得很好,画布上的轴标签归功于jquery.flot.canvas.js插件.

问题

我正在用宽酒吧制作条形图.我希望我的x轴标签在条形图下方居中,而不是在刻度线下面居中(它们看起来有点太远了).

在我将轴标签放在画布上之前(例如,当使用没有jquery.flot.canvas.js插件的HTML标签时),我使用SCSS为它们设置样式,

.flot-x-axis {
  .tickLabel {
    font-size: 10px;
    padding-left: 16px;     // Nudges x-axis labels to the right
  }
}

现在,通过在画布上渲染标签,上面的SCSS不会将x轴标签向右移动.奇怪的是,font-size:样式确实有效,但padding-left:没有效果(也尝试了margin-left :).我似乎无法找到适当的选择器来应用填充.

我感谢任何帮助.谢谢!

更新

我在我的代码中使用了align:'center'选项,但它似乎没有任何效果(即,如同align:'center'省略).请参阅如何使用Flot canvas插件.FWIW,我正在使用基于时间的数据.

看起来我遇到了类似的问题,Flot条形图月份对齐问题

jsFiddle在这里.注意:在FireFox中呈现正常,但在Chrome中则不然.

好吧,当然它在我的jsFiddle中运行正常,但不在我的代码中.我猜我需要抬起眼睛!

Answer 1

Flot Canvas插件仅识别您可以使用CSS执行的操作的子集.通常它识别与文本样式有关的任何内容; 字体系列,大小,样式,间距和颜色.它不识别像填充,边距等的盒子模型规则.

听起来你真正想要的是使用吧align: center选项.