3

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

问题

我正在制作带有宽条的条形图。我希望我的 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 画布插件。FWIW，我正在使用基于时间的数据。

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

jsFiddle 在这里。注意：在 FireFox 中渲染得很好，但在 Chrome 中却不行。

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

4

1 回答 1

6

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

听起来您真正想要的是使用 baralign: center选项。

于 2013-05-24T20:59:30.240 回答