javascript - Flot 轴标签在 Canvas 中的位置

Question

我正在使用 Flot 0.8.1 构建 Rails 3.2.11 应用程序。我想使用 Prawn 在 PDF 中呈现我的 Flot 图表。 (我将使用 .getCanvas 和 .toDataURL 方法将图像数据 Ajax 到服务器。)我的 Flot 图表在浏览器中呈现得很好， Canvas 上有轴标签感谢 jquery.flot.canvas.js 插件。

问题

我正在制作带有宽条的条形图。我希望我的 x 轴标签在条形图下方居中，而不是在刻度线下方居中(它们看起来有点偏左)。

在我将我的轴标签放在 Canvas 上之前(即，当使用没有 jquery.flot.canvas.js 插件的 HTML 标签时)，我像这样用 SCSS 设置它们的样式，

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

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

我很感激任何帮助。谢谢!

更新

我在我的代码中使用了 align: 'center' 选项，但它似乎没有任何效果(即，与 align: 'center' 省略)。请参阅，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 选项。