代码之家 › 专栏 › 技术社区 › Bittercoder

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

graphing flot

9

Bittercoder · 技术社区 · 17 年前

我有一个基本的条形图,用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
    }
});

4 回复 | 直到 17 年前

1

17

Brent M Brent M 17 年前

看起来你可以通过API设置字体大小,但是你可以使用css设置记号标签的大小。

.tickLabel { font-size: 80% }

2

12

Dennis 12 年前

下面是一个直接来自API的示例:

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

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

3

6

Joel Cross 14 年前

上述两个答案在最新版本的flot上不起作用,因为它们不再使用“真实”文本(而是绘制文本)。而是指定以下选项:

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

(替换 some_number 具有所需大小(以点为单位)

4

1

madLokesh 13 年前

我使用了以下方法:

#graph_label .tickLabel{

     font-size: 50%;
  }

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

参考:上文@BrentM的答案

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