如何控制海军报剔标签尺寸

StackOverflow https://stackoverflow.com/questions/459947

  •  19-08-2019
  •  | 
  •  

题

我有一个基本的条形图我呈现在海军报（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？

有帮助吗？

解决方案

它不会出现可以通过API设置字体大小，但可以使用CSS来设置刻度标记的尺寸。

.tickLabel { font-size: 80% }

其他提示

下面直接从API是一个例子：

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

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

在上述两个答案不会在海军报的最新版本的工作，因为他们不再使用“真实”文本（文本绘制代替）。代替指定这些选项：

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

（替换在点所需尺寸some_number）

我使用了以下内容：

<强> CSS文件/ SCSS文件 

#graph_label .tickLabel{

     font-size: 50%;
  }

<强> index.html或地方，你正在策划图形区域 

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

价：@BrentM的回答上述的

PS：我使用的海军报之前的版本0.8.1，所以我不有关于最新版本是如何工作的任何想法

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top