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

这可能是 OOTB 吗？

Answer 1

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

.tickLabel { font-size: 80% }

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

Answer 3

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

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

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

Answer 4

我使用了以下内容：

CSS 文件/SCSS 文件

#graph_label .tickLabel{

     font-size: 50%;
  }

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

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

参考：@BrentM 的上述答案

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

Answer 5

这个解决方案适用于我的新版本的 flot。
在 yaxis 属性中，定义以下 tickFormatter() 函数：

yaxis : {
 ... 
    
    tickFormatter = function (val, axis) {
        var label = val.toFixed(axis.tickDecimals);
        if (minorTicks.includes(val)) {
            return '<span class="minor-tick">' + label + '</span>';
        } else {
            return label;
        }
    };
}

然后在 CSS 中添加以下内容：

.flot-y-axis .flot-tick-label span.minor-tick {
    font-size: smaller;
    color: gray; 
}