浮动轴标签在画布中的位置答案

【问题标题】：Flot axis labels position in canvas浮动轴标签在画布中的位置
【发布时间】：2013-05-20 12:30:50
【问题描述】：

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

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

jsFiddle here。注意：在 FireFox 中渲染良好，但在 Chrome 中则不行。

当然，它在我的 jsFiddle 中可以正常工作，但在我的代码中却不行。看来我需要擦亮眼睛了！

【问题讨论】：

你能创建一个 jsFiddle 来演示你的问题吗？

标签： javascript css html5-canvas padding flot

【解决方案1】：

Flot Canvas 插件仅识别您可以使用 CSS 执行的部分操作。一般来说，它可以识别任何与文本样式相关的内容；字体系列、大小、样式、间距和颜色。它不识别填充、边距等盒子模型规则。

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

【讨论】：

align: center 工作到一定程度。它使条相对于网格线对齐。我真的很想要一种对齐标签的方法，以便它出现在网格线“之间”。对我来说，条形图以网格线为中心看起来很奇怪。
和你一样。我用这个属性让网格垂直消失了，而且好多了！ xaxis: { tickLength: 0 }