10

我有一个基本条形图，我在 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吗？

4

4 回答 4

17

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

.tickLabel { font-size: 80% }
于 2009-03-20T14:52:42.250 回答
12

这是直接来自 API 的示例：

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

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

于 2012-07-12T21:17:30.320 回答
6

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

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

（替换some_number为所需的大小，以磅为单位）

于 2011-12-08T12:13:29.330 回答
1

我使用了以下内容：

CSS 文件/SCSS 文件

#graph_label .tickLabel{

     font-size: 50%;
  }

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

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

参考：@BrentM 上面的回答

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

于 2013-06-13T06:15:39.720 回答