如何在flot中控制刻度标签的大小？

Question

我在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文档，但找不到如何控制刻度标签大小的方法。

这是否可能直接使用库提供的功能实现？

- Bittercoder

---

你能否发布更新和更正后的解决方案？我尝试将这个'grid: { hoverable: true, clickable: false, .tickLabel { font-size: 80% } }'添加到我的图表中，但它失败了。 - emeraldjava

你需要将.tickLabel添加到你的应用程序级联样式表（CSS）中，而不是作为你传递给flot调用的json的一部分。 - Bittercoder

Answer 1

看起来似乎无法通过API设置字体大小，但是您可以使用CSS来设置刻度标签的大小。

.tickLabel { font-size: 80% }

- Brent M

---

是的，我自己发现了这个问题，但忘记回复并关闭这个问题。当页面缩放到120%左右时，CSS更改在IE中会产生一些“有趣”的效果，不幸的是 - 尽管在最好的情况下IE并不是flot的最佳选择！感谢确认！ - Bittercoder

我应该在哪里进行这个更改，@BrentM。 - madLokesh

在你的CSS文件中添加@madLokesh。 - itziki

同时，您可以控制y或x标签： .flot-y-axis .tickLabel { font-size: 9px } .flot-x-axis .tickLabel { font-size: 12px } - sHaDeoNeR

对于那些想要通过API实现的人，可以看一下@Shun Takeda的其他答案。 - Adam Sibik

Answer 2

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

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

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

- Shun Takeda

Answer 3

以上两个答案在最新版本的flot上将无法使用，因为它们不再使用“真实”的文本（而是绘制文本）。 取而代之的是指定以下选项：

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

（将some_number替换为所需的点数大小）

- Joel Cross

---

为了与Flot 0.7及更早版本兼容，标签也被赋予了“tickLabel”类，但这已经过时，并计划在1.0.0版本发布时删除。 - user533832

此外，最新版本仍然默认使用“真实”的文本。一旦包含了“canvas”插件，它的默认值似乎会切换（这好像没有被记录在文档中）。 - user533832

Answer 4

我使用了以下内容：

CSS 文件/SCSS 文件

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html或者是你绘制图形区域的位置

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

参考：@BrentM的答案如上所述

PS：我正在使用早于0.8.1版本的Flot，因此我不知道最新版本的工作方式

- madLokesh