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：＆＃39; center＆＃39; 选项，但它似乎没有任何效果（即，与 align：＆相同）＃39;中心＆＃39; 省略）。请参阅How to use Flot canvas plugin。 FWIW，我正在使用基于时间的数据。

看起来我遇到了类似的问题，Flot bar chart month alignment issue

jsFiddle here。注意：在FireFox中呈现正常，但在Chrome中不呈现。

嗯，当然它在我的jsFiddle中运行正常，但不在我的代码中。我猜我需要抬起眼睛！

Answer 1

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

听起来你真正想要的是使用条形align: center选项。

在画布上绘制轴标签位置

1 个答案: