如何控制 flot 中的刻度标签大小答案

【问题标题】：How do I control the tick label size in flot如何控制 flot 中的刻度标签大小
【发布时间】：2010-10-02 09:02:18
【问题描述】：

我有一个基本的条形图，我在 flot 中展示（5 个条形图，显示每个状态的百分比）。

$.plot($("#placeholder"), [
    {
        label: 'Failed',
        data: [[0,10]],
        bars: { show: true }
    },
    {
        label: 'Passed',
        data: [[1,15]],
        bars: { show: true }
    },
    {
        label: 'Not Run',
        data: [[2,30]],
        bars: { show: true }
    },
    {
        label: 'Blocked',
        data: [[3,5]],
        bars: { show: true }
    },
    {
        label: 'In Progress',
        data: [[4,40]],
        bars: { show: true }
    }
],
{
    xaxis: {
        ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
    },
    legend: {
        show: false
    }
});

我发现用于 x 轴刻度值的字体有点太大，尤其是当图表以小尺寸显示时，即。 240x100。我已阅读 API 文档，但找不到如何控制刻度标签大小。

这可能是 OOTB 吗？

【问题讨论】：

您有机会发布更新和更正的解决方案吗？我尝试将这个“网格：{ hoverable: true, clickable: false, .tickLabel { font-size: 80% } },”添加到我的图表中，但它爆炸了。
您需要将 .tickLabel 添加到应用的级联样式表 (CSS)，而不是作为传递给 flot 调用的 json 的一部分。

标签： flot graphing

【解决方案1】：

似乎不能通过API设置字体大小，但可以使用css设置刻度标签的大小。

.tickLabel { font-size: 80% }

【讨论】：

是的，我自己发现了这一点，但忘了通过关闭这个问题来跟进。不幸的是，当将页面放大到 120% 时，CSS 更改在 IE 中产生了一些“有趣”的效果——尽管 IE 在最好的情况下并不是一个很好的浮动候选者！感谢您的确认！
我应该在哪里进行此更改@BrentM
@madLokesh 在你的 CSS 文件中。
也可以控制y或x标签：.flot-y-axis .tickLabel { font-size: 9px }.flot-x-axis .tickLabel { font-size: 12px }
对于希望通过 API 进行操作的人，请查看@Shun Takeda 的另一个答案

【解决方案2】：

这是一个直接来自 API 的示例：

xaxis:{
   font:{
      size:11,
      style:"italic",
      weight:"bold",
      family:"sans-serif",
      variant:"small-caps"
   }
}

http://flot.googlecode.com/svn/trunk/API.txt

【讨论】：

【解决方案3】：

以上两个答案不适用于最新版本的 flot，因为它们不再使用“真实”文本（而是绘制文本）。而是指定这些选项：

{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}

（将some_number 替换为所需的磅数）

【讨论】：

For compatibility with Flot 0.7 and earlier the labels are also given the 'tickLabel' class, but this is deprecated and scheduled to be removed with the release of version 1.0.0
此外，最新版本默认仍使用“真实”文本。包含“画布”插件后，默认值似乎会切换（似乎没有记录）。

【解决方案4】：

我使用了以下内容：

CSS 文件/SCSS 文件

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html 或您要绘制图形区域的位置

$.plot($("graph_label"), [dataArrayReference], options);

参考：@BrentM 上面的回答

PS：我使用的是 0.8.1 之前的 Flot 版本，所以我不知道最新版本的工作原理

【讨论】：